處理長列表
使用 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。