【定番】如何使用ListView.builder來表示清單!

在Flutter中,ListView.builder常用於列表表示。
我自己也經常使用,但不太了解具體的使用方法。

這次,我們將介紹如何使用ListView.builder。

基本的ListView.builder使用方法

首先,是ListView.builder的基本實現。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('ListView.builder with All Properties'),
        ),
        body: MyListView(),
      ),
    );
  }
}

class MyListView extends StatelessWidget {
  // 創建列表項目
  final List<String> items = List<String>.generate(20, (i) => "Item $i");

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: items.length, // 指定列表項目數
      // 表示列表中的項目
      itemBuilder: (context, index) {
        return ListTile(
          title: Text('${items[index]}'),
        );
      },
      scrollDirection: Axis.vertical, // 設定滾動方向為垂直
      reverse: false, // 不逆轉順序
      padding: EdgeInsets.all(8.0), // 在整個列表中添加8像素的內邊距
      primary: true, // 指定此列表是否為主要滾動視圖
      shrinkWrap: false, // 不根據內容調整列表高度
      physics: BouncingScrollPhysics(), // 指定滾動行為
      addAutomaticKeepAlives: true, // 指定各項目是否自動保持
      addRepaintBoundaries: true, // 指定各項目是否有重新繪製邊界
      addSemanticIndexes: true, // 指定各項目是否有語義索引
    );
  }
}

在這段代碼中,使用ListView.builder顯示了20個列表項目。

ListView.builder的屬性

ListView.builder提供了多種屬性。

itemCount(可選)

itemCount是指定列表項目數的屬性。
itemCount屬性不是必需的,但如果設置,
列表項目數量會明確決定,提升列表性能。

itemBuilder(必需)

itemBuilder是生成各項目的屬性。
逐一處理接收到的列表項目,並返回顯示的Widget。

scrollDirection(可選)

scrollDirection是指定列表的滾動方向。
可以設定為垂直方向(Axis.vertical)或水平方向(Axis.horizontal)。
預設為垂直方向(Axis.vertical)。

reverse(可選)

reverse是指定是否逆轉列表順序。
設為true則顯示順序逆轉。預設為false。

padding(可選)

padding是指定整個列表的內邊距。
這是一個在其他Widget中經常出現的屬性,
例如EdgeInsets.all(8.0),則在列表四周添加8像素的內邊距。

primary(可選)

primary是例如嵌套的滾動視圖時,
設定哪個視圖優先滾動。
設為true,則此列表優先滾動。預設為true。

shrinkWrap(可選)

shrinkWrap是指定列表是否只佔用所需的空間。
設為true則根據內容決定自身高度。
預設為false。

physics

指定列表的滾動行為。
有BouncingScrollPhysics和ClampingScrollPhysics。
預設為BouncingScrollPhysics。

因為描述比較困難,建議實際實現後比較。

addAutomaticKeepAlives(可選)

指定各項目是否自動保持。
即使未顯示在屏幕上的列表項目也會保留在內存中,
使滾動更順暢,但如果數量多會影響性能。
預設為true。

addRepaintBoundaries(可選)

指定項目是否有重新繪製邊界。
設為true,則僅重新繪製變更的項目。
設為false,則重新繪製整個列表。
預設為true。

addSemanticIndexes(可選)

指定各項目是否有語義索引。
語義索引使屏幕閱讀器(讀取功能)和
其他無障礙工具能準確讀取列表項目的順序和位置。
預設為true。

總結

我只用過”itemCount”和”itemBuilder”,
但經過調查,發現了許多屬性。
“scrollDirection”和”shrinkWrap”等在某些場合可能很有用。

此外,Flutter中還有許多方便的列表小部件,將在未來介紹。

标题和URL已复制