簡介
一般情況下，我們使用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，希望大家能夠靈活掌握。