在之前講
Layout Widget的文章中，我們掌握了基於不同的場景適當的選擇不同的Widget來完成我們的佈局要求，但是關於長列表的資料展示我們並沒有做展開介紹，而長列表的身影幾乎出現在日常生活中的任意一款APP中，鑑於它的重要性，所以我想單獨作為一個章節來講解長列表Widget---ListView&GirdView。
1.ListView
1.1 ListView簡單列表
看下ListView的構造方法，然後我們用listview來完成一個簡單列表
ListView({
Key key,
Axis scrollDirection: Axis.vertical,//滾動方向
bool reverse: false,//是否反向顯示資料
ScrollController controller,
bool primary,
ScrollPhysics physics,//物理滾動
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
this.itemExtent,//item有效範圍
bool addAutomaticKeepAlives: true,//自動儲存檢視快取
bool addRepaintBoundaries: true,//新增重繪邊界
List<Widget> children: const <Widget>[],
})
複製程式碼
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
title: "ListView",
home: new MyApp(),
));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("ListView"),
),
body: ListView(
scrollDirection: Axis.vertical, //控制列表方向
children: <Widget>[
new Container(
width: 100.0,
height: 100.0,
color: Colors.lightBlue,
),
new Container(
width: 100.0,
height: 100.0,
color: Colors.red,
),
new Container(
width: 100.0,
height: 100.0,
color: Colors.deepPurple,
),
new Container(
width: 100.0,
height: 100.0,
color: Colors.yellow,
),
new Container(
width: 100.0,
height: 100.0,
color: Colors.lightBlue,
),
new Container(
width: 100.0,
height: 100.0,
color: Colors.red,
),
new Container(
width: 100.0,
height: 100.0,
color: Colors.deepPurple,
),
new Container(
width: 100.0,
height: 100.0,
color: Colors.lightBlue,
),
new Container(
width: 100.0,
height: 100.0,
color: Colors.red,
),
new Container(
width: 100.0,
height: 100.0,
color: Colors.deepPurple,
),
new Container(
width: 100.0,
height: 100.0,
color: Colors.lightBlue,
),
],
));
}
}
複製程式碼上述程式碼中我們利用ListView做了一個簡單的長列表佈局，通過給children: <Widget>[]傳入我們要展示的子Widget來完成列表渲染，理論上我們可以傳入任意多的子Widget，但是這點使用起來跟Column沒有太大差別，這顯然是不符合我們的預期的，因為我們在使用ListView展示長列表佈局的時候，大多數情況下我們是不知道長列表一共有多少個元素，即使是能知道，我們重複性的把每個相似的佈局都寫一遍，也幾乎讓人崩潰。
沒錯，Flutter肯定給我們提供了像原生Android寫Adapter一樣的方式，我們可以提前寫好公共的Item佈局，然後通過ListView.builder（）或者ListView.custom（）方式自動生成長列表，ListView.builder（）和ListView.custom（）的用法基本相同，只不過custom可以根據自己的需要控制Item顯示方式，如Item顯示大小。
1.2 可複用的ListView長列表
下面我帶大家一起看下ListView.builder()的構造方法，然後使用ListView.builder寫個簡單的樣式程式碼，至於ListView.custom的用法我會在下面介紹GridView的時候講到，讀者可參考Listview.bulider自行測試。
ListView.builder({
Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
this.itemExtent,
@required IndexedWidgetBuilder itemBuilder,//item構建者
int itemCount,//item數量
bool addAutomaticKeepAlives: true,
bool addRepaintBoundaries: true,
})
複製程式碼從ListView.bulider的構造方法我們可以看出，它只比上述我們直接使用的ListView的構造方法多了兩個引數，也正是這兩個引數簡化了我們對長列表的操作
itemCount：：被展示的Item的數量itemBuilder:被展示的Item的構造者（這裡讀者可以它類比成原生Android的Adapter）
下面我們來看下效果圖：
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
title: "ListView",
home: new MyApp(),
));
}
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() => MyState();
}
class MyState extends State {
List<ItemEntity> entityList = [];
@override
void initState() {
super.initState();
for (int i = 0; i < 30; i++) {
entityList.add(ItemEntity("Item $i", Icons.accessibility));
}
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("ListView"),
),
body: ListView.builder(
itemBuilder: (BuildContext context, int index) {
return ItemView(entityList[index]);
},
itemCount: entityList.length,
));
}
}
/**
* 渲染Item的實體類
*/
class ItemEntity {
String title;
IconData iconData;
ItemEntity(this.title, this.iconData);
}
/**
* ListView builder生成的Item佈局，讀者可類比成原生Android的Adapter的角色
*/
class ItemView extends StatelessWidget {
ItemEntity itemEntity;
ItemView(this.itemEntity);
@override
Widget build(BuildContext context) {
return Flex(
direction: Axis.vertical,
children: <Widget>[
ListTile(
leading: Icon(itemEntity.iconData), title: Text(itemEntity.title),subtitle: Text('長列表')),
SizedBox(
height: 0.2,
child: Container(
color: Colors.black,
),
)
],
);
}
}
複製程式碼上述程式碼中的邏輯讀者大部分都可以自解的，我就不多做贅述了，下面我們進入本篇分享的第二部分，關於GridView部分的講解。
2.GridView
跟原生Android一樣，GridView滿足了我們所有使用表格佈局的場景，當然如果GridView在每行或者每列都只顯示一個Item的時候又相當於ListView的使用場景。但是回到Flutter上GridView的用法又跟ListView使用類似，可以直接new物件的方式生成簡單的表格佈局，也可以像ListView那樣通過builder（）和custom（）方法來建立可複用的物件
構造方法
GridView({
Key key,
Axis scrollDirection: Axis.vertical,
bool reverse: false,
ScrollController controller,
bool primary,
ScrollPhysics physics,
bool shrinkWrap: false,
EdgeInsetsGeometry padding,
@required this.gridDelegate, //控制GridView顯示方式
bool addAutomaticKeepAlives: true,
bool addRepaintBoundaries: true,
List<Widget> children: const <Widget>[],
})
複製程式碼上面提到GridView跟ListView使用方法類似，但是GridView不同於ListView的是它可以在一行或者一列顯示多個Item，所以GridView的構造方法對比ListView多了一個gridDelegate引數，來配置一行（列）有幾個Item和Item的間隔。
gridDelegate引數說明
gridDelegate可接收兩種引數型別：
SliverGridDelegateWithFixedCrossAxisCount可以直接指定每行（列）顯示多少個ItemSliverGridDelegateWithMaxCrossAxisExtent會根據GridView的寬度和你設定的每個的寬度來自動計算沒行顯示多少個Item
先來看下GridView的效果圖，關於gridDelegate的區別我在程式碼裡做了註釋講解，這裡就不在多贅述了讀者可結合程式碼自行理解。
效果圖
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
title: "ListView",
home: new MyApp(),
));
}
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() => MyState();
}
class MyState extends State {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("ListView"),
),
body: new GridView(
// gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
// crossAxisCount: 3, //固定顯示三個
// mainAxisSpacing: 10,
// crossAxisSpacing: 10),
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 100, //根據maxCrossAxisExtent的值對比螢幕的真實寬度，決定一行或者一列顯示多少個Item
mainAxisSpacing: 10,
crossAxisSpacing: 10),
children: <Widget>[
Container(
child: Icon(Icons.adb, size: 60),
color: Colors.deepOrangeAccent),
Container(
child: Icon(Icons.adb, size: 60),
color: Colors.deepOrangeAccent),
Container(
child: Icon(Icons.adb, size: 60),
color: Colors.deepOrangeAccent),
Container(
child: Icon(Icons.adb, size: 60),
color: Colors.deepOrangeAccent),
Container(
child: Icon(Icons.adb, size: 60),
color: Colors.deepOrangeAccent),
Container(
child: Icon(Icons.adb, size: 60),
color: Colors.deepOrangeAccent),
Container(
child: Icon(Icons.adb, size: 60),
color: Colors.deepOrangeAccent),
Container(
child: Icon(Icons.adb, size: 60),
color: Colors.deepOrangeAccent),
],
));
}
}
複製程式碼在本篇分享的第一部分我們介紹ListView的時候提到，為了複用Item佈局，我們可以通過builder()或者custom來生成Item佈局，在ListView中我們使用的是builder()的方式生成的可複用的佈局，在gridView中我帶大家使用下custom()，其實listView跟GridView使用類似，無非就是佈局排列不同而已。
效果圖
樣例程式碼
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
title: "ListView",
home: new MyApp(),
));
}
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() => MyState();
}
class MyState extends State {
List<ItemEntity> entityList = [];
@override
void initState() {
super.initState();
for (int i = 0; i < 30; i++) {
entityList.add(ItemEntity("Item $i", Icons.accessibility));
}
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text("GridView"),
),
body: GridView.custom(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 10,
mainAxisSpacing: 10,
),
childrenDelegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return ItemView(entityList[index]);
},
childCount: entityList.length,
)));
}
}
/**
* 渲染Item的實體類
*/
class ItemEntity {
String title;
IconData iconData;
ItemEntity(this.title, this.iconData);
}
/**
* GridView builder生成的Item佈局，讀者可類比成原生Android的Adapter的角色
*/
class ItemView extends StatelessWidget {
ItemEntity itemEntity;
ItemView(this.itemEntity);
@override
Widget build(BuildContext context) {
return GestureDetector(
child: Flex(
direction: Axis.vertical,
children: <Widget>[
Icon(
itemEntity.iconData,
size: 60,
),
Text(itemEntity.title),
],
),
onTap: () {
Scaffold.of(context).showSnackBar(
new SnackBar(content: Text("點選了${itemEntity.title}")));
},
);
}
}
複製程式碼總結
通過本篇博文我們瞭解到ListView跟GridView都可以直接用new物件的方式生成列表佈局，一個用於表格佈局，另一個用於長列表佈局，也可以使用new 或者builder（）和custom（）方法來建立可複用物件，從而擴充套件了ListView跟GridView的靈活性，就像我們原生Android一樣，把可複用的佈局抽象成Adapter的形式，但是或許你總覺得關於列表還少點什麼，下拉重新整理？載入更多？