长列表的处理

标准的 ListView 构造函数适用于短列表，对于具有大量列表项的长列表，需要用 ListView.builder 构造函数来创建。

与标准的 ListView 构造函数需要一次性创建所有列表项不同的是，ListView.builder 构造函数只在列表项从屏幕外滑入屏幕时才去创建列表项。

1. 创建数据源

首先，需要获取列表的数据源。例如，数据源可以是消息集、搜索结果集或者商店商品集。大部分情况下，这些数据来自于网络请求或者数据库获取。

在下面的例子，使用 List.generate 构造函数生成包含 10000 个字符串的集合。

final items = List<String>.generate(10000, (i) => "Item $i");

2. 将数据源渲染成组件

为了将字符串集合展示出来，需要把集合中的每个字符串都渲染成组件。

这个渲染过程正是 ListView.builder 的作用所在。在下面的例子中，将会把每个字符串用单行列表项显示在列表中。

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text('${items[index]}'),
    );
  },
);

完整示例

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
void main() {
  runApp(MyApp(
    items: List<String>.generate(10000, (i) => "Item $i"),
  ));
}
class MyApp extends StatelessWidget {
  final List<String> items;
  MyApp({Key key, @required this.items}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    final title = 'Long List';
    return MaterialApp(
      title: title,
      home: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text('${items[index]}'),
            );
          },
        ),
      ),
    );
  }
}