flutter GridView你想要的都在这儿
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中并没有翻看了官方文档发现提供了一个插件
����.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
