标准的 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]}'),
);
},
),
),
);
}
}
当前内容版权归 flutter-io.cn 或其关联方所有,如需对内容或内容相关联开源项目进行关注与资助,请访问 flutter-io.cn .