一、ListView構造方法

主要以下幾種方法：

• 常規方法，直接使用默認的構造方法
• ListView.builder
• ListView.separated

1.1 常規方法

ListView的常規方法：就是利用默認方法構造各個item，ListView有個children屬性：傳入多個widget：

import 'package:flutter/material.dart';main(List<String> args) {runApp(const MyApp());
}class MyApp extends StatelessWidget {// This widget is the root of your application.@overrideWidget build(BuildContext context) {const title = 'ListView的使用';return MaterialApp(debugShowCheckedModeBanner: false,title: title,theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),useMaterial3: true,),home: Scaffold(appBar: AppBar(title: const Text(title),),body:MyHomeBody(),);}
}class MyHomeBody extends StatelessWidget {const MyHomeBody({super.key});final TextStyle textStyle = const TextStyle(fontSize: 10, color: Colors.blue);@overrideWidget build(BuildContext context) {return  ListView(children: List<Widget>.generate(100, (i) => Text('列表 $i')),);}
}

運行效果圖如下：

1.2 ListView.builder

List<Widget>.generate 會默認把所有子item全部創建出來，如果子item數量過多時，會影響頁面的渲染時間，ListView.builder不會把所有子item創建出來，會在真正需要的時候構建出來，不會一開始全部初始化出來，適合數量很多item的場景：

void main() {runApp(MyApp(items: List<String>.generate(10000, (i) => '列表 $i'),),);
}class MyApp extends StatelessWidget {final List<String> items;const MyApp({super.key, required this.items});// This widget is the root of your application.@overrideWidget build(BuildContext context) {const title = 'ListView的使用';return MaterialApp(debugShowCheckedModeBanner: false,title: title,theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),useMaterial3: true,),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]),);},),);}
}

運行效果圖如下：

1.3 ListView.separated

ListVIew.separated相比ListView.builder只是每項之間增加了一個分割符合：

void main() {runApp(MyApp(items: List<String>.generate(10000, (i) => '列表 $i'),),);
}class MyApp extends StatelessWidget {final List<String> items;const MyApp({super.key, required this.items});// This widget is the root of your application.@overrideWidget build(BuildContext context) {const title = 'ListView的使用';return MaterialApp(debugShowCheckedModeBanner: false,title: title,theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),useMaterial3: true,),home: Scaffold(appBar: AppBar(title: const Text(title),),body:ListView.separated(itemCount: items.length,separatorBuilder: (context, index) => const Divider(),itemBuilder: (context, index) {return ListTile(title: Text(items[index]),);},),);}
}

運行效果圖如下：

---

二、自定義ListView樣式和布局：

我們可以使用ListView.builder的itemBuilder屬性來自定義列表項的樣式和布局，下面一個例子是動態設置item布局背景

void main() {runApp(MyApp(items: List<String>.generate(10000, (i) => '列表 $i'),),);
}class MyApp extends StatelessWidget {final List<String> items;const MyApp({super.key, required this.items});// This widget is the root of your application.@overrideWidget build(BuildContext context) {const title = 'ListView的使用';return MaterialApp(debugShowCheckedModeBanner: false,title: title,theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),useMaterial3: true,),home: Scaffold(appBar: AppBar(title: const Text(title),),body:ListView.builder(itemCount: items.length,itemBuilder: (context, index) {return Container(color: index % 2 == 0 ? Colors.grey[300] : Colors.red,padding: const EdgeInsets.all(16),child: Text(items[index]),);},),),);

運行效果圖如下：

---

三、ListView性能優化：

當使用ListView顯示大量數據時，為了提高性能，推薦以下優化方式：

1. 使用ListView.builder或ListView.separated來按需構建列表項，避免一次性構建所有的項。
2. 使用ListView.separated并提供合適的分隔符構建方法，避免不必要的分隔符構建。
3. 如果列表項固定是高度，請使用itemExtent屬性來指定項的高度，避免動態計算高度帶來的性能開銷。
4. 使用ScrollController來控制滾動，并使用addPostFrameCallback在構建完成后延遲加載數據。

---

總結：

上文我們介紹構建ListView常見的幾種使用方法，以及簡單的自定義布局和樣式方法的例子，優化ListView性能方式方法，使用ListView推薦使用ListView.builder、ListView.separated。
Thanks:
Flutter可滾動組件（2）：ListView基本使用