1. GridView的介紹
學(xué)習(xí)過ListView的使用,我們接下來學(xué)習(xí)GridView(網(wǎng)格布局)的使用,GridView有5種構(gòu)造函數(shù):GridView扣癣，GridView.builder，GridView.count，GridView.extent和GridView.custom独柑。
來看下GridView構(gòu)造函數(shù)（已省略不常用屬性）：
GridView({
Key key,
Axis scrollDirection = Axis.vertical,
bool reverse = false,
ScrollController controller,
ScrollPhysics physics,
bool shrinkWrap = false,
EdgeInsetsGeometry padding,
@required this.gridDelegate,
double cacheExtent,
List<Widget> children = const <Widget>[],
})
這里很多的屬性都是和ListView相似的,除了一個在GridView.builder必要的參數(shù)gridDelegate,就讓我們來重點(diǎn)關(guān)注下
gridDelegate這個參數(shù)唱凯，它其實(shí)是GridView組件如何控制排列子元素的一個委托伤提。跟蹤源碼我們可以在scroll_view.dart中看到，gridDelegate的類型是SliverGridDelegate偎谁，進(jìn)一步跟蹤進(jìn)sliver_grid.dart可以看到SliverGridDelegate其實(shí)是一個抽象類，而且一共有兩個實(shí)現(xiàn)類：
SliverGridDelegateWithFixedCrossAxisCount：用于固定列數(shù)的場景纲堵；
SliverGridDelegateWithMaxCrossAxisExtent：用于子元素有最大寬度限制的場景巡雨；
2. GridView的使用
想要使用GridView我們就要首先構(gòu)造數(shù)據(jù):
List<String> getDataList() {
List<String> list = [];
for (int i = 0; i < 100; i++) {
list.add(i.toString());
}
return list;
}
List<Widget> getWidgetList() {
return getDataList().map((item) => getItemContainer(item)).toList();
}
Widget getItemContainer(String item) {
return Container(
alignment: Alignment.center,
child: Text(
item,
style: TextStyle(color: Colors.white, fontSize: 20),
),
color: Colors.cyan,
);
}
2.1 GridView.count
GridView.count(
//水平子Widget之間間距
crossAxisSpacing: 10.0,
//垂直子Widget之間間距
mainAxisSpacing: 30.0,
//GridView內(nèi)邊距
padding: EdgeInsets.all(10.0),
//一行的Widget數(shù)量
crossAxisCount: 2,
//子Widget寬高比例
childAspectRatio: 2.0,
//子Widget列表
children: getWidgetList(),
);
對于這種寫法，此時(shí)單個Widget的寬高已經(jīng)不起作用了席函。
在我上面構(gòu)造數(shù)據(jù)的那一步中铐望，我并沒有指定Container的的寬高，這里我們就將其寬高設(shè)置為5茂附。
Widget getItemContainer(String item) {
return Container(
width: 5.0,
height: 5.0,
alignment: Alignment.center,
child: Text(
item,
style: TextStyle(color: Colors.white, fontSize: 20),
),
color: Colors.blue,
);
}
可以看出沒有效果正蛙。因?yàn)椋覀冊谶@里已經(jīng)指定了每一行分成幾列以及寬高比营曼，還有邊距等等乒验。所以，我們后面再指定單個item的寬高蒂阱，已經(jīng)無效徊件。
2.2 GridView.builder(SliverGridDelegateWithFixedCrossAxisCount)
Widget build(BuildContext context) {
List<String> datas = getDataList();
return GridView.builder(
itemCount: datas.length,
//SliverGridDelegateWithFixedCrossAxisCount 構(gòu)建一個橫軸固定數(shù)量Widget
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
//橫軸元素個數(shù)
crossAxisCount: 3,
//縱軸間距
mainAxisSpacing: 20.0,
//橫軸間距
crossAxisSpacing: 10.0,
//子組件寬高長度比例
childAspectRatio: 1.0),
itemBuilder: (BuildContext context, int index) {
//Widget Function(BuildContext context, int index)
return getItemContainer(datas[index]);
});
}
2.3 GridView.builder(SliverGridDelegateWithMaxCrossAxisExtent)
GridView.builder(
itemCount: datas.length,
itemBuilder: (BuildContext context, int index) {
return getItemContainer(datas[index]);
},
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
//單個子Widget的水平最大寬度
maxCrossAxisExtent: 200,
//水平單個子Widget之間間距
mainAxisSpacing: 20.0,
//垂直單個子Widget之間間距
crossAxisSpacing: 10.0
),
);
對于SliverGridDelegateWithMaxCrossAxisExtent而言奸攻，水平方向元素個數(shù)不再固定，其水平個數(shù)也就是有幾列虱痕，由maxCrossAxisExtent和屏幕的寬度以及padding和mainAxisSpacing等決定睹耐。
2.4 GridView.custom
Widget build(BuildContext context) {
List<String> datas = getDataList();
return GridView.custom(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3, mainAxisSpacing: 10.0, crossAxisSpacing: 20.0, ),
childrenDelegate: SliverChildBuilderDelegate((context, position) {
return getItemContainer(datas[position]);
}, childCount: datas.length));
}
想了解更多Flutter學(xué)習(xí)知識請聯(lián)系:QQ(814299221)
