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

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

1. 创建数据源

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

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

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

2. 将数据源渲染成组件

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

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

  1. ListView.builder(
  2. itemCount: items.length,
  3. itemBuilder: (context, index) {
  4. return ListTile(
  5. title: Text('${items[index]}'),
  6. );
  7. },
  8. );

完整示例

  1. import 'package:flutter/foundation.dart';
  2. import 'package:flutter/material.dart';
  3. void main() {
  4. runApp(MyApp(
  5. items: List<String>.generate(10000, (i) => "Item $i"),
  6. ));
  7. }
  8. class MyApp extends StatelessWidget {
  9. final List<String> items;
  10. MyApp({Key key, @required this.items}) : super(key: key);
  11. @override
  12. Widget build(BuildContext context) {
  13. final title = 'Long List';
  14. return MaterialApp(
  15. title: title,
  16. home: Scaffold(
  17. appBar: AppBar(
  18. title: Text(title),
  19. ),
  20. body: ListView.builder(
  21. itemCount: items.length,
  22. itemBuilder: (context, index) {
  23. return ListTile(
  24. title: Text('${items[index]}'),
  25. );
  26. },
  27. ),
  28. ),
  29. );
  30. }
  31. }

Long Lists Demo