GridView是我們開發中比較常用的組件,能夠滿足很多我們布局的要求,這里詳細介紹一下GridView的使用.
- GridView的基本用法
- 定義一個我想要的item
- 給我的GridView分組加一個我想要的Header區域
- 拋磚引玉瀑布流的時候我們如何實現
1. 先介紹一下GridView的基本用法
-
GridView有很多種初始化的方法大家可以根據開發需要選擇,第一種通過GridView.count進行初始化,這種方法接受item的屬性是一個" List<Widget> children = const <Widget>[],"的數組,如果我們沒有局部刷新的需求,列表也相對簡單統一我們可以用這種方式相對快捷方便,但是我們想刷新列表就要更新數據源,只能在父控件中調用setState方法,刷新整個列表,效率不高.
屏幕快照 2020-04-21 上午11.12.52.png
GridView.count(
//水平子Widget之間間距
crossAxisSpacing: 10.0,
//垂直子Widget之間間距
mainAxisSpacing: 30.0,
//GridView內邊距
padding: EdgeInsets.all(5.0),
//一行的Widget數量
crossAxisCount: 2,
//子Widget寬高比例
childAspectRatio: 2.0,
//子Widget列表
children: getList().map((item) => getItemContainer(item)).toList(),
),
//提供一個裝有字符串的數組做數據源
List<String> getList() {
List<String> list = [];
for (int i = 0; i < 100; i++) {
list.add(i.toString());
}
return list;
}
//創建Item提供給GridView
Widget getItemContainer(String item) {
return Container(
alignment: Alignment.center,
child: Text(
item,
style: TextStyle(color: Colors.white, fontSize: 20),
),
color: Colors.blue,
);
}
-
第二種初始化方法分兩部分寫過移動端的伙伴應該都不陌生,GridView的相關屬性都在SliverGridDelegateWithMaxCrossAxisExtent協議中設置,item的設置放在itemBuilder中,這里我們的Item相對復雜一些.有時候,我們開發中也經常遇到比較復雜的Item比如列表套列表這種情況,所以這里的Item我使用了一個StatefulWidget,這樣我們在進行局部刷新的時候就可以在我們Item的StatefulWidget中調用setState,這樣我們就做到了只刷新一個單一的Item,效率較高.也就是說如果有復雜需求的時候,我更傾向于用這種方法進行初始化
屏幕快照 2020-04-21 上午11.26.17.png
GridView.builder(gridDelegate: new SliverGridDelegateWithMaxCrossAxisExtent(
crossAxisSpacing:10.0,
mainAxisSpacing: 10.0,
maxCrossAxisExtent: 200.0,
), itemBuilder: (BuildContext context, int index){
return SelfItemWidget(
index: index,
);
}),
class SelfItemWidget extends StatefulWidget {
final String item;
final int index;
const SelfItemWidget({Key key, this.item, this.index}) : super(key: key);
@override
_SelfItemWidgetState createState() => _SelfItemWidgetState();
}
class _SelfItemWidgetState extends State<SelfItemWidget> {
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
print(widget.index);
},
child: Container(
alignment: Alignment.center,
child: Column(
children: <Widget>[
Image.asset(
"images/Bitmap.png",
height: 100,
width: double.infinity,
fit: BoxFit.cover,
),
Container(
margin: EdgeInsets.fromLTRB(13, 10, 0, 0),
width: double.infinity,
child: Text('運動',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 14.0, fontWeight: FontWeight.bold),
),
),
Container(
margin: EdgeInsets.fromLTRB(13, 10, 0, 0),
width: double.infinity,
child: Text('描述一下這個運動詳情',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 11.0,
),
),
),
],
),
),
);
}
}
-
開發中我們經常有遇到分組的情況,比如常見的好友列表,原生開發中控件也給我們了listHeader這種東西或者相關協議讓我們進行設置,但是flutter中并沒有翻看了官方文檔發現提供了一個插件
?±??1???????.gif
Pub上有一個包“flutter_staggered_grid_view” ，它實現了一個交錯GridView的布局模型，可以很輕松的實現這種布局，詳情讀者可以自行了解。
那我們就看看使用這個插件來滿足我們的需求
flutter_staggered_grid_view: ^0.3.0
我們引入插件
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
官方demo中給我們介紹了很多種用法和初始化方法,我這里詳細介紹一種,插件給我們提供一個叫StaggeredGridView的控件,初始化方法和GridView類似但是多了一個staggeredTileBuilder,這個staggeredTileBuilder可以讓我們通過條件自由的控制每一個Item的尺寸大小.設置StaggeredTile.count后面填寫目標比例
const StaggeredTile.count(this.crossAxisCellCount, this.mainAxisCellCount)
大家可以動手試試加深理解,這樣就能設置一個我們想要的頭部了.
StaggeredGridView getNewGridView(){
return StaggeredGridView.countBuilder(
crossAxisCount: 4,
mainAxisSpacing: 4.0,
crossAxisSpacing: 4.0,
itemCount: 10,
itemBuilder: (context,index){
return SelfItemWidget(
index: index,
item: "---",
);
}, staggeredTileBuilder: (int index){
if(index == 0 || index == 6)
{
return new StaggeredTile.count(4, 0.5);
} else {
return new StaggeredTile.count(2, 2);
}
});
}
class SelfItemWidget extends StatefulWidget {
final String item;
final int index;
const SelfItemWidget({Key key, this.item, this.index}) : super(key: key);
@override
_SelfItemWidgetState createState() => _SelfItemWidgetState();
}
class _SelfItemWidgetState extends State<SelfItemWidget> {
@override
Widget build(BuildContext context) {
if(widget.index == 0 || widget.index == 6)
{
return Container(
margin: const EdgeInsets.only(left: 5, right: 5),
child: Text(
"----------- 看這是一個分組 -----------",
style: TextStyle(fontSize: 15, color: Colors.black38),
),
alignment: Alignment.center,
);
} else {
return GestureDetector(
onTap: () {
print(widget.index);
},
child: Container(
alignment: Alignment.center,
child: Column(
children: <Widget>[
Image.asset(
"images/Bitmap.png",
height: 100,
width: double.infinity,
fit: BoxFit.cover,
),
Container(
margin: EdgeInsets.fromLTRB(13, 10, 0, 0),
width: double.infinity,
child: Text('運動',
textAlign: TextAlign.left,
style: TextStyle(fontSize: 14.0, fontWeight: FontWeight.bold),
),
),
Container(
margin: EdgeInsets.fromLTRB(13, 10, 0, 0),
width: double.infinity,
child: Text('描述一下這個運動詳情',
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 11.0,
),
),
),
],
),
),
);
}
}
}
- 最后說一下瀑布流和自定義我們想要的列表StaggeredGridView的官方demo中有很詳細的例子,大家可以去查閱 傳送門這樣你也可以實現一個炫酷的界面
屏幕快照 2020-04-21 下午12.26.10.png
