flutter - 了解ListView.builder

标签 flutter dart

好的,所以我认为我对Flutter Builder有点困惑。
我创建了一个简单的应用程序,只是为了使我的问题更容易:
我有一个数据类:

    class DataLists {
  List<ListTile> lists = [
    ListTile(
      leading: Text('Tile Leading 1'),
      title: Text('Tile Title 1'),
      subtitle: Text('Tile Subtitle 1'),
      trailing: Text('Tile Trailing 1'),
    ),
    ListTile(
      leading: Text('Tile Leading 2'),
      title: Text('Tile Title 2'),
      subtitle: Text('Tile Subtitle 2'),
      trailing: Text('Tile Trailing 2'),
    ),
    ListTile(
      leading: Text('Tile Leading 3'),
      title: Text('Tile Title 3'),
      subtitle: Text('Tile Subtitle 3'),
      trailing: Text('Tile Trailing 3'),
    ),
    ListTile(
      leading: Text('Tile Leading 4'),
      title: Text('Tile Title 4'),
      subtitle: Text('Tile Subtitle 4'),
      trailing: Text('Tile Trailing 4'),
    ),
    ListTile(
      leading: Text('Tile Leading 5'),
      title: Text('Tile Title 5'),
      subtitle: Text('Tile Subtitle 5'),
      trailing: Text('Tile Trailing 5'),
    ),
  ];
}
和主要的 Dart 文件:
import 'package:flutter/material.dart';
import 'package:learning/data.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: TestTile(),
    );
  }
}

class TestTile extends StatefulWidget {
  @override
  _TestTileState createState() => _TestTileState();
}

class _TestTileState extends State<TestTile> {
  DataLists dataLists = DataLists();
  TextEditingController leadingController = TextEditingController();
  TextEditingController titleController = TextEditingController();
  TextEditingController subtitleController = TextEditingController();
  TextEditingController trailingController = TextEditingController();
  Future<String> createDialog(BuildContext context) {
    return showDialog(context: context, builder: (context) {
      return SimpleDialog(
        title: Text('Input data: '),
        children: [
          TextField(
            controller: leadingController,
          ),
          TextField(
            controller: titleController,
          ),
          TextField(
            controller: subtitleController,
          ),
          TextField(
            controller: trailingController,
          ),
          MaterialButton(
            child: Text('Submit'),
            onPressed: () {
              Navigator.of(context).pop(leadingController.text);
              setState(() {
                List<ListTile> tempList = dataLists.lists;
                if (titleController.text.isNotEmpty && leadingController.text.isNotEmpty && subtitleController.text.isNotEmpty && trailingController.text.isNotEmpty) {
                  tempList.add(
                    ListTile(
                      leading: Text(leadingController.text),
                      title: Text(titleController.text),
                      subtitle: Text(subtitleController.text),
                      trailing: Text(trailingController.text),
                    ),
                  );
                  dataLists.lists = tempList;
                } else {
                  print('Null values');
                }
                leadingController.clear();
                titleController.clear();
                subtitleController.clear();
                trailingController.clear();
              });
            },
          ),
        ],
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Test Tile'),
      ),
      body: Container(
        child: SafeArea(
          child: ListView(
            children: <ListTile>[
              for (ListTile e in dataLists.lists)
                e
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          createDialog(context);
          setState(() {

          });
        },
        child: Icon(Icons.add),
        backgroundColor: Colors.blue,
      ),
    );
  }
}
问题是:我无法使其以其他方式工作。有人可以将我的实现更改为ListView.builder吗?我有点卡住了:(
主要目标:
理念:
单击按钮->出现表单->按提交按钮后,列表立即更新
稍后,我将添加删除功能,仅学习文档,仅此而已。
有人可以查看我的代码,如果没有人尝试使用ListView.builder重写相同的想法?
我已经尝试了几次,但是无法从表单中正确获取属性,并且无法使用构建器更新listtile,需要帮助
干杯!

最佳答案

ListView.builder需要一个静态高度,因此请在该高度上保持跟踪。现在,问题来了,您想使用ListView.builder。你可以通过这个做

Container(
  height: give_your_height,
  child: ListView.builder(
    shrinkWrap: true,
    itemCount: dataLists.lists.length,
    itemBuilder: (context, index) {
      return dataLists.lists[index];
    }
  )
)

关于flutter - 了解ListView.builder,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63456212/

相关文章:

flutter - 如何使用 Flutter 将 PDF 文件转换为图像?

list - 无法使用列表创建ListView.builder

flutter - 在 Flutter 中使用 Navigator.popUntil() 时断言失败 : ! _debugLocked 不为 true

dart - 使用 Dart 操作 Google Sheet api

ios - 无法为 Flutter 项目构建 ipa [CocoaPods 找不到 pod "GoogleAppMeasurement":] 的兼容版本

dart - 如何将 Column 的子元素与底部对齐

flutter - 使用 Flutter 和 Hive 缓存 API 结果

flutter - 如何使用 Flutter 实现这个特定的滚动动画?

csv - 将数据从 csv 转换为动态列表 (Flutter)

Flutter VsCode 错误 : You don't have an extension for debugging YAML