處理長列表

標準的 ListView 建構函式適用於小型列表。若要處理包含大量項目的列表，最好使用 ListView.builder 建構函式。

與預設的 ListView 建構函式要求一次建立所有項目不同，ListView.builder() 建構函式會在項目捲動到螢幕上時建立項目。

首先，你需要一個資料來源。例如，你的資料來源可能是一串訊息、搜尋結果，或商店中的產品。大多數情況下，這些資料來自網路或資料庫。

在這個範例中，使用 List.generate 建構子產生一個包含 10,000 個字串的列表。

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

為了顯示字串列表，使用 ListView.builder() 將每個字串渲染成一個 widget。在這個範例中，將每個字串顯示在單獨的一行上。

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]),
            );
          },
        ),
      ),
    );
  }
}

為了指定每個項目的範圍，你可以使用 prototypeItem、itemExtent 或 itemExtentBuilder。

指定其中任何一個都比讓子元件自行決定其範圍更有效率，因為滾動機制可以利用預先知道子元件範圍的資訊來節省工作，例如當滾動位置發生劇烈變化時。

如果你的列表項目具有固定大小，請使用 prototypeItem 或 itemExtent。

如果你的列表項目具有不同大小，請使用 itemExtentBuilder。

除非另有說明，本網站上的文件反映了 Flutter 的最新穩定版本。頁面最後更新於 2024-06-26。 檢視原始碼 或 回報問題。