Flutter Listview.builder全面解析

Flutter是一款UI開發框架，由Google推出，使用它可以快速構建高質量的原生界面。其中的Listview.builder是非常強大的一個控制項，在開發中經常會用到。下面我們將從多個方面對其進行詳細介紹，包括定義、參數、用法、優缺點等。

一、定義

ListView.builder是Flutter框架中的一個控制項，用於在界面上顯示一組類似於列表的數據。它與ListView的區別在於， builder不需要在構造函數中傳入列表數據。而是需要您提供一個函數，在每次需要使用新數據時，該函數將自動調用。

二、參數

我們來看一下ListView.builder構造函數的參數，以便更好的理解其使用方法。主要包含以下4個參數：

ListView.builder({
  Key? key,
  required this.itemBuilder,  //當ListView重新構建時，將創建一個新的項。
  this.scrollDirection = Axis.vertical,//滾動方向。默認是垂直方式
  this.controller, //與ListView關聯的控制器。用於監聽列表滾動位置等事件。
  this.primary, //是否強制ListView的滾動視圖和外層的PrimaryScrollController保持一致。
  this.physics,//列表的滾動行為，例如滾動到邊緣時的動畫效果等。
  this.shrinkWrap = false,//如果為true，則會圍繞其子項儘可能緊密包裝。如果為false，則會擴展以適合其父級。
  this.padding, //用於在ListView周圍添加空白間距、分割線等的填充
  this.itemExtent, //子項的固定高度。如果設置了這個屬性，那麼itemBuilder參數必須null，
  this.semanticChildCount,//語義子項的數量
  this.dragStartBehavior = DragStartBehavior.start,//確定拖動啟動行為是由GestureDetector開始還是由它的父Editor外面的開始手勢開始的
  this.keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,//確定鍵盤按鍵時滾動視圖的行為。 
})

三、用法

1、基本使用

讓我們從基本示例開始。下面的代碼演示了如何使用builder創建一個簡單的ListView。這個示例中，它只顯示一個字元串列表。

  ListView.builder(
    itemCount: items.length,//條目數量
    itemBuilder: (BuildContext context, int index) => ListTile(title: Text('${items[index]}')),
  )

其中，itemCount為列表中的條目數量，itemBuilder是一個函數，用於創建新的子項。例如，每當需要一個新的子項時，該函數將被調用，並將創建一個新的子項，然後將其添加到列表中。

2、添加分割線

我們可以在ListView.builder中傳入Divider控制項來為列表添加分隔符。方法如下：

  ListView.builder(
    itemCount: items.length,
    itemBuilder: (BuildContext context, int index) {
      return Column(
        children: [
          ListTile(title: Text('${items[index]}')),
          Divider(),
        ],
      );
    },
  )

3、滾動到指定位置

我們在列表中添加一個FloatingActionButton控制項，可以實現當點擊按鈕時，ListView.builder將滾動到頂部。實現代碼如下：

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  final ScrollController _scrollController = ScrollController();

  void _scrollToTop() {
    _scrollController.animateTo(0, duration: Duration(seconds: 1), curve: Curves.easeInOut);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ListView.builder示例"),
      ),
      body: ListView.builder(
        controller: _scrollController,
        itemCount: items.length,
        itemBuilder: (BuildContext context, int index) {
          return Column(
            children: [
              ListTile(title: Text('${items[index]}')),
              Divider(),
            ],
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _scrollToTop,
        tooltip: 'Scroll to top',
        child: Icon(Icons.arrow_upward),
      ),
    );
  }
}

4、下拉刷新

我們可以使用RefreshIndicator控制項，在ListView.builder中實現下拉刷新的效果。下面是一個示例：

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  final ScrollController _scrollController = ScrollController();

  // 刷新列表，更新數據
  Future _handleRefresh() async {
    // 為模擬刷新效果，讓線程停留兩秒鐘
    await Future.delayed(Duration(seconds: 2));

    setState(() {
      items.clear();
      items.addAll(new List.generate(30, (index) => "Item $index"));
    });

    return null;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ListView.builder示例"),
      ),
      body: RefreshIndicator(
        onRefresh: _handleRefresh,
        child: ListView.builder(
          controller: _scrollController,
          itemCount: items.length,
          itemBuilder: (BuildContext context, int index) {
            return Column(
              children: [
                ListTile(title: Text('${items[index]}')),
                Divider(),
              ],
            );
          },
        ),
      ),
    );
  }
}

5、無限滾動

有時，我們想要在滾動列表時按需載入更多數據。ListView.builder提供了一個onEndReached回調函數，使我們能夠在用戶滾到列表的末尾時，自動載入更多數據。這裡是一個實現無限滾動的示例：

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  final ScrollController _scrollController = ScrollController();

  // 載入更多數據
  void _loadMore() {
    setState(() {
      items.addAll(newList);
      newList.clear(); 
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ListView.builder示例"),
      ),
      body: ListView.builder(
        controller: _scrollController,
        itemCount: items.length + 1,
        itemBuilder: (BuildContext context, int index) {
          if (index == items.length) {
            return Container(
              padding: EdgeInsets.symmetric(vertical: 32.0),
              alignment: Alignment.center,
              child: CircularProgressIndicator(),
            );
          }
          final item = items[index];
          return Column(
            children: [
              ListTile(title: Text('$item')),
              Divider(),
            ],
          );
        },
        // 滾動到指定位置時 觸發載入更多操作
        onEndReached: _loadMore,
      ),
    );
  }
}

四、優缺點

1、優點

ListView.builder控制項的優點主要集中在如下幾方面：

適用於大規模數據顯示，支持高效的滾動性能
不需要通過直接傳入List的方式來構建列表，而是使用builder創建新的列表項，更加方便靈活
可以添加分割線、下拉刷新、無限滾動等其他功能，提升用戶體驗
可以自由設置列表的滾動行為，例如動畫速度、滾動到頂部或底部，使得交互效果更加自然順暢

2、缺點

雖然ListView.builder控制項擁有很多優點，但還是存在一些缺點需要我們注意：

在創建新的列表項時，需要不斷調用itemBuilder函數，因此可能會導致一定的性能問題
需要深入理解ListView.builder的使用方法和屬性含義，否則容易出現錯誤或較低的生產效率
如果列表中的每個子項的大小大小不一致，則可能導致滾動性能問題

結語

本文對ListView.builder控制項進行了全面的介紹，包括定義、參數、用法、優缺點等。通過學習這些內容，相信大家對ListView.builder有了更加深入的了解，可以更好的在實際中應用這個控制項，提升Flutter開發的生產效率。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/153447.html