Flutter学习 滚动组件（1）：ListView基本利用

一、ListView构造方法

主要以下几种方法：

• 通例方法，直接利用默认的构造方法
  
• ListView.builder
  
• ListView.separated
  

1.1 通例方法

ListView的通例方法：就是利用默认方法构造各个item，ListView有个children属性：传入多个widget：

1. import 'package:flutter/material.dart';
3. main(List<String> args) {
4.   runApp(const MyApp());
5. }
7. class MyApp extends StatelessWidget {
9.   // This widget is the root of your application.
10.   @override
11.   Widget build(BuildContext context) {
12.     const title = 'ListView的使用';
14.     return MaterialApp(
15.       debugShowCheckedModeBanner: false,
16.       title: title,
17.       theme: ThemeData(
18.         colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
19.         useMaterial3: true,
20.       ),
21.       home: Scaffold(
22.           appBar: AppBar(
23.             title: const Text(title),
24.           ),
25.           body:
26.           MyHomeBody(),
27.     );
28.   }
29. }
31. class MyHomeBody extends StatelessWidget {
32.   const MyHomeBody({super.key});
33.   final TextStyle textStyle = const TextStyle(fontSize: 10, color: Colors.blue);
35.   @override
36.   Widget build(BuildContext context) {
37.     return  ListView(
38.       children: List<Widget>.generate(100, (i) => Text('列表 $i')),
39.     );
40.   }
41. }

复制代码

运行结果图如下：

1.2 ListView.builder

List<Widget>.generate 会默认把全部子item全部创建出来，假如子item数量过多时，会影响页面的渲染时间，ListView.builder不会把全部子item创建出来，会在真正需要的时间构建出来，不会一开始全部初始化出来，适合数量许多item的场景：

1. void main() {
2.   runApp(
3.     MyApp(
4.       items: List<String>.generate(10000, (i) => '列表 $i'),
5.     ),
6.   );
7. }
9. class MyApp extends StatelessWidget {
10.   final List<String> items;
12.   const MyApp({super.key, required this.items});
14.   // This widget is the root of your application.
15.   @override
16.   Widget build(BuildContext context) {
17.     const title = 'ListView的使用';
19.     return MaterialApp(
20.       debugShowCheckedModeBanner: false,
21.       title: title,
22.       theme: ThemeData(
23.         colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
24.         useMaterial3: true,
25.       ),
26.       home: Scaffold(
27.           appBar: AppBar(
28.             title: const Text(title),
29.           ),
30.           body:
31.           ListView.builder(
32.                 itemCount: items.length,
33.                 prototypeItem: ListTile(
34.                   title: Text(items.first),
35.                 ),
36.                 itemBuilder: (context, index) {
37.                   return ListTile(
38.                     title: Text(items[index]),
39.                   );
40.                 },
41.               ),
42.     );
43.   }
44. }

复制代码

运行结果图如下：

1.3 ListView.separated

ListVIew.separated相比ListView.builder只是每项之间增加了一个分割符合：

1. void main() {
2.   runApp(
3.     MyApp(
4.       items: List<String>.generate(10000, (i) => '列表 $i'),
5.     ),
6.   );
7. }
9. class MyApp extends StatelessWidget {
10.   final List<String> items;
12.   const MyApp({super.key, required this.items});
14.   // This widget is the root of your application.
15.   @override
16.   Widget build(BuildContext context) {
17.     const title = 'ListView的使用';
19.     return MaterialApp(
20.       debugShowCheckedModeBanner: false,
21.       title: title,
22.       theme: ThemeData(
23.         colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
24.         useMaterial3: true,
25.       ),
26.       home: Scaffold(
27.           appBar: AppBar(
28.             title: const Text(title),
29.           ),
30.           body:
31.           ListView.separated(
32.             itemCount: items.length,
33.             separatorBuilder: (context, index) => const Divider(),
34.             itemBuilder: (context, index) {
35.               return ListTile(
36.                 title: Text(items[index]),
37.               );
38.             },
39.           ),
40.     );
41.   }
42. }

复制代码

运行结果图如下：

---

二、自定义ListView样式和结构：

我们可以利用ListView.builder的itemBuilder属性来自定义列表项的样式和结构，下面一个例子是动态设置item结构背景

1. void main() {
2.   runApp(
3.     MyApp(
4.       items: List<String>.generate(10000, (i) => '列表 $i'),
5.     ),
6.   );
7. }
9. class MyApp extends StatelessWidget {
10.   final List<String> items;
12.   const MyApp({super.key, required this.items});
14.   // This widget is the root of your application.
15.   @override
16.   Widget build(BuildContext context) {
17.     const title = 'ListView的使用';
19.     return MaterialApp(
20.       debugShowCheckedModeBanner: false,
21.       title: title,
22.       theme: ThemeData(
23.         colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
24.         useMaterial3: true,
25.       ),
26.       home: Scaffold(
27.           appBar: AppBar(
28.             title: const Text(title),
29.           ),
30.           body:
31.            ListView.builder(
32.             itemCount: items.length,
33.             itemBuilder: (context, index) {
34.               return Container(
35.                 color: index % 2 == 0 ? Colors.grey[300] : Colors.red,
36.                 padding: const EdgeInsets.all(16),
37.                 child: Text(items[index]),
38.               );
39.             },
40.           ),
41.         ),
42.        );

复制代码

运行结果图如下：

---

三、ListView性能优化：

当利用ListView显示大量数据时，为了提高性能，推荐以下优化方式：

• 利用ListView.builder或ListView.separated来按需构建列表项，避免一次性构建全部的项。
  
• 利用ListView.separated并提供合适的分隔符构建方法，避免不须要的分隔符构建。
  
• 假如列表项固定是高度，请利用itemExtent属性来指定项的高度，避免动态计算高度带来的性能开销。
  
• 利用ScrollController来控制滚动，并利用addPostFrameCallback在构建完成后延迟加载数据。
  

---

总结：

上文我们介绍构建ListView常见的几种利用方法，以及简朴的自定义结构和样式方法的例子，优化ListView性能方式方法，利用ListView推荐利用ListView.builder、ListView.separated。
Thanks:
Flutter可滚动组件（2）：ListView基本利用


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。