[toc]
簡介
一般情況下，我們使用Listview的方式是構建要展示的item，然後將這些item傳入ListView的構造函數即可，通常情況下這樣做是夠用了，但是不排除我們會有一些其他的特殊需求。
今天我們會來講解一下ListView的一些高級用法。
ListView的常規用法
ListView的常規用法就是直接使用ListView的構造函數來構造ListView中的各個item。
其中ListView有一個children屬性，它接收一個widget的list，這個list就是ListView中要呈現的對象。
我們來構造一個擁有100個item的ListView對象：
class CommonListViewApp extends StatelessWidget{
const CommonListViewApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return ListView(
children: List<Widget>.generate(100, (i) => Text('列表 $i')),
);
}
}
上面的例子中，我們簡單的使用List.generate方法生成了100個對象。
在item數目比較少的情況下是沒有任何問題的，如果item數目比較多的情況下，直接將所有的item都取出來放在ListView中就不太現實了。
幸好，ListView還提供了一個ListView.builder的方法，這個方法會按需進行item的創建，所以在item數目比較多的情況下是非常好用的。
還是上面的例子，這次我們要生成10000個item對象，然後將這些對象放在ListView中去，應該如何處理呢？
因爲這次我們要使用builder,所以沒有必要在item生成的時候就創建好widget，我們可以將widget的創建放在ListView的builder中。
首先，我們構建一個items list，並將其傳入MyApp的StatelessWidget中：
MyApp(
items: List<String>.generate(10000, (i) => '列表 $i'),
)
然後就可以在MyApp的body中使用ListView.builder來構建item了：
body: ListView.builder(
itemCount: items.length,
prototypeItem: ListTile(
title: Text(items.first),
),
itemBuilder: (context, index) {
return ListTile(
title: Text(items[index]),
);
},
)
ListView.builder是推薦用來創建ListView的方式，上面的完整代碼如下：
import 'package:flutter/material.dart';
void main() {
runApp(
MyApp(
items: List<String>.generate(10000, (i) => '列表 $i'),
),
);
}
class MyApp extends StatelessWidget {
final List<String> items;
const MyApp({Key? key, required this.items}) : super(key: key);
@override
Widget build(BuildContext context) {
const title = 'ListView的使用';
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]),
);
},
),
),
);
}
}
創建不同類型的items
看到這裏，可能有同學會問了，ListView中是不是隻能創建一種item類型呢？答案當然是否定的。
不管是從ListView的構造函數構建還是從ListView.builder構建，我們都可以自由的創建不同類型的item。
當然最好的辦法就是使用ListView.builder，根據傳入的index的不同來創建不同的item。
還是上面的例子，我們可以在創建items數組的時候就根據i的不同來生成不同的item類型，也可以如下所示，在itemBuilder中根據index的不同來返回不同的item：
body: ListView.builder(
itemCount: items.length,
prototypeItem: ListTile(
title: Text(items.first),
),
itemBuilder: (context, index) {
if(index %2 == 0) {
return ListTile(
title: Text(items[index]),
);
}else{
return Text(items[index]);
}
},
)
非常的方便。
創建不同item的完整代碼如下：
import 'package:flutter/material.dart';
void main() {
runApp(
MyApp(
items: List<String>.generate(10000, (i) => '列表 $i'),
),
);
}
class MyApp extends StatelessWidget {
final List<String> items;
const MyApp({Key? key, required this.items}) : super(key: key);
@override
Widget build(BuildContext context) {
const title = 'ListView的使用';
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) {
if(index %2 == 0) {
return ListTile(
title: Text(items[index]),
);
}else{
return Text(items[index]);
}
},
),
),
);
}
}
總結
ListView是我們在應用中會經常用到的一種widget，希望大家能夠靈活掌握。