Flutter：使用 ListView.builder 显示动态

Flutter 是 Google 的移动 App SDK，它用来帮助创建单代码库（几乎） iOS 和 Android 现代移动应用。它是跨平台移动开发领域的后来者，与 React Native 等框架不同，它不使用 JavaScript 而是采用 DART 作为开发语言。

什么是动态内容？

除非 App 很基础并且是为了学习目的而创建的，否则它始终要使用动态数据，比如说屏幕显示内容将随用户操作和/或网络数据的变化而改变。
多数情况下，动态行为是通过更新界面上显示的内容来实现的。Flutter 提示 ListView.builder，可用于从外部数据源生成动态内容。

使用 ListView.builder(…)

ListView.builder 是一种构建列表的方法，其中的子 Widget 可以按需构建。但是，与返回静态 Widget 不同的是，它会多次调用（基于 itemCount）一个生成函数，并可在每次调用时返回不同的 Widget。
举个例子，让我们创建一个包含基本 MaterialApp 的简单应用，其中 Scaffold 包含 AppBar 和 Body。

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext ctxt) {
    return new MaterialApp(
      home: new ListDisplay(),
    );
  }
}

class ListDisplay extends StatelessWidget {
  @override
  Widget build (BuildContext ctxt) {
    return new Scaffold(
      appBar: new AppBar(title: new Text("Dynamic Demo"),),
      body:  // ListView.builder() 在这里使用.
      ),
    );
  }
}

要使用 ListView.builder，我们必须使用 new 调用其构造方法来创建它的实例，它需要多个参数，而其中两个特别重要：

1. itemCount
2. itemBuilder

itemCount 参数决定调用 itemBuilder 中回调函数的次数。
为了证明这一点，假设在我们的应用中有一个这样的全局列表：

List<String> litems = ["1","2","Third","4"];

让我们使用 ListView.builder(...) 来显示 Body 中的列表项，代码如下所示：

body: new ListView.builder
  (
    itemCount: litems.length,
    itemBuilder: (BuildContext ctxt, int index) {
     return new Text(litems[index]);
    }
  )

这里回调函数被就地调用 4 次，每次调用将生成一个 Text Widget 以显示在 Body 中。

我们也可以编写一个独立的函数设置给 itemBuilder：

// 从 itemBuilder 调用的独立函数
Widget buildBody(BuildContext ctxt, int index) {
  return new Text(litems[index]);
}

(
  itemCount: litems.length,
  itemBuilder: (BuildContext ctxt, int index) => buildBody(ctxt, index)
),

这两情况下的输出都应该是这样的：

使用 ListView 显示动态内容

如果我们只是想在每次应用加载 Widget 时显示不同的内容，可以在无状态（Stateless）Widget 中使用 ListView.Builder(..)。但如果想动态更新已显示的内容，则可以使用带状态的 Widget 。

带状态 Widget 下的 ListView.builder(…)

让我们先将已有代码转换为有状态的 Widget：

class ListDisplay extends StatefulWidget {
  @override
  State createState() => new DyanmicList();
}

class DyanmicList extends State<ListDisplay> {
  @override
  Widget build (BuildContext ctxt) {
      return new Scaffold(...)
}

为了正确理解带状态部件中的 ListView.builder(..)，可以使用带状态 Widget 创建一个非常简单的 ToDo 待办 App。我们将创建文本输入区域（例如 TextField，允许用户在 ToDo 列表中添加自定义条目），一旦条目添加到 ToDo 列表中，它会被即时显示在屏幕上。
由于我们将在 Body: 中创建多个 Widget，因为必须使用能容纳多个子 Widget 的部件，比如 Column:。但是 ListView.builder(...) 无法在 Column 下工作，除非它被包装在 Expanded Widget 内部，Expanded Widget 允许 Column 元素展开并填充在主轴中，这也是ListView.builder(...)所需要的。

因此整个继承体系应该像这样：

Stateful Widget Scaffold 继承体系

为了将文本条目加入列表，我们需要一个空列表和 TextEditingController：

List<String> litems = [];
final TextEditingController eCtrl = new TextEditingController();

下面是 TextField Widget 如何被创建：

new TextField(
  controller: eCtrl,
  onSubmitted: (text) {
    litems.add(text);  // Append Text to the list
    eCtrl.clear();     // Clear the Text area
    setState(() {});   // Redraw the Stateful Widget
  },
),

ListView.builder(...) 的实现没有任何修改，但它将被包装到 Expanded Widget 里：

new Expanded(
    child: new ListView.builder
      (
        itemCount: lItems.length,
        itemBuilder: (BuildContext ctxt, int Index) {
          return new Text(lItems[Index]);
        }
    )
)

我们已经准备好动态更新屏幕内容，这是操作的结果：

动态 ToDo 列表

下面是 DynamicList 类的完整代码：

class DyanmicList extends State<ListDisplay> {
  List<String> litems = [];
  final TextEditingController eCtrl = new TextEditingController();
  @override
  Widget build (BuildContext ctxt) {
    return new Scaffold(
      appBar: new AppBar(title: new Text("Dynamic Demo"),),
      body: new Column(
        children: <Widget>[
          new TextField(
            controller: eCtrl,
            onSubmitted: (text) {
              litems.add(text);
              eCtrl.clear();
              setState(() {});
            },
          ),
          new Expanded(
            child: new ListView.builder
              (
                itemCount: litems.length,
                itemBuilder: (BuildContext ctxt, int Index) {
                  return new Text(litems[Index]);
                }
            )
        )
        ],
      )
    );
  }
}

这就是所有的内容了，我希望已经解释清楚了如何使用 ListView.builder(...) 来生成动态内容。

感谢你的阅读！

---

原文： https://medium.com/@DakshHub/flutter-displaying-dynamic-contents-using-listview-builder-f2cedb1a19fb
作者：Daksh
编译：码王爷