处理长列表
使用 ListView.builder 来实现长列表或无限列表。
标准的 ListView 构造函数适用于小列表。若要处理包含大量条目的列表,最好使用 ListView.builder 构造函数。
与默认的 ListView 构造函数需要一次性创建所有条目不同,ListView.builder() 构造函数仅在条目滚动进入屏幕时才会创建它们。
1. 创建数据源
#首先,你需要一个数据源。例如,你的数据源可能是一系列消息、搜索结果或商店中的商品。大多数情况下,这些数据来自互联网或数据库。
在本例中,使用 List.generate 构造函数生成包含 10,000 个字符串的列表。
dart
List<String>.generate(10000, (i) => 'Item $i'),
2. 将数据源转换为微件 (Widgets)
#要显示字符串列表,请使用 ListView.builder() 将每个字符串渲染为微件。在本例中,将每个字符串显示在各自的行上。
dart
ListView.builder(
itemCount: items.length,
prototypeItem: ListTile(title: Text(items.first)),
itemBuilder: (context, index) {
return ListTile(title: Text(items[index]));
},
)
互动示例
#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;
const MyApp({super.key, required this.items});
@override
Widget build(BuildContext context) {
const title = 'Long List';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(title: const Text(title)),
body: ListView.builder(
itemCount: items.length,
prototypeItem: ListTile(title: Text(items.first)),
itemBuilder: (context, index) {
return ListTile(title: Text(items[index]));
},
),
),
);
}
}
子项的尺寸
#要指定每个条目的尺寸(extent),你可以使用 prototypeItem、itemExtent 或 itemExtentBuilder。
指定尺寸比让子项自行决定尺寸效率更高,因为滚动机制可以利用预知的子项尺寸来减少计算量,例如在滚动位置发生剧烈变化时。
如果你的列表条目大小固定,请使用 prototypeItem 或 itemExtent。
如果你的列表条目大小不同,请使用 itemExtentBuilder。