跳到主内容

处理长列表

使用 ListView.builder 实现长列表或无限列表。

标准的 ListView 构造函数适用于小型列表。要处理包含大量条目的列表,最好使用 ListView.builder 构造函数。

与需要一次性创建所有条目的默认 ListView 构造函数不同,ListView.builder() 构造函数会在条目滚动到屏幕上时创建它们。

1. 创建数据源

#

首先,你需要一个数据源。例如,你的数据源可能是消息列表、搜索结果或商店中的产品。大多数情况下,这些数据来自互联网或数据库。

对于此示例,使用 List.generate 构造函数生成 10,000 个字符串的列表。

dart
List<String>.generate(10000, (i) => 'Item $i'),

2. 将数据源转换为小部件

#

要显示字符串列表,使用 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]));
          },
        ),
      ),
    );
  }
}

子项的范围

#

要指定每个条目的范围,可以使用 prototypeItemitemExtentitemExtentBuilder

指定其中一个比让子项确定自己的范围更有效,因为滚动机制可以利用对子项范围的预先了解来节省工作,例如在滚动位置发生剧烈变化时。

如果你的列表具有固定大小的条目,请使用 prototypeItemitemExtent

如果你的列表具有不同大小的条目,请使用 itemExtentBuilder