GridView用于展示多列的展示，在开发中也非常常见，比如直播App中的主播列表、电商中的商品列表等等。
1. GridView构造函数
一种使用GridView的方式就是使用构造函数来创建，和ListView对比有一个特殊的参数：gridDelegate
gridDelegate用于控制交叉轴的item数量或者宽度，需要传入的类型是SliverGridDelegate，但是它是一个抽象类，所以我们需要传入它的子类
SliverGridDelegateWithFixedCrossAxisCount
SliverGridDelegateWithFixedCrossAxisCount({
@requireddouble crossAxisCount, // 交叉轴的item个数
double mainAxisSpacing = 0.0, // 主轴的间距
double crossAxisSpacing = 0.0, // 交叉轴的间距
double childAspectRatio = 1.0, // 子Widget的宽高比
})
代码演练：
class MyHomeBody extends StatelessWidget {
List<Widget> getGridWidgets() {
return List.generate(100, (index){
return Container(
color: Colors.purple,
alignment: Alignment(0, 0),
child: Text("item $index",style: TextStyle(fontSize: 20,color: Colors.white),),
);
});
}
@override
Widget build(BuildContext context) {
return GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childAspectRatio: 1.0
),
children: getGridWidgets(),
);
}
}
image.png
SliverGridDelegateWithMaxCrossAxisExtent
SliverGridDelegateWithMaxCrossAxisExtent({
double maxCrossAxisExtent, // 交叉轴的item宽度
double mainAxisSpacing = 0.0, // 主轴的间距
double crossAxisSpacing = 0.0, // 交叉轴的间距
double childAspectRatio = 1.0, // 子Widget的宽高比
})
代码演练：
class MyHomeBody extends StatelessWidget {
List<Widget> getGridWidgets() {
return List.generate(100, (index){
return Container(
color: Colors.purple,
alignment: Alignment(0, 0),
child: Text("item $index",style: TextStyle(fontSize: 20,color: Colors.white),),
);
});
}
@override
Widget build(BuildContext context) {
return GridView(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 100,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childAspectRatio: 1.5
),
children: getGridWidgets(),
);
}
}
image.png
前面两种方式也可以不设置delegate
可以分别使用：GridView.count构造函数和GridView.extent构造函数实现相同的效果，这里不再赘述。
2. GridView.build
和ListView一样，使用构造函数会一次性创建所有的子Widget，会带来性能问题，所以我们可以使用GridView.build来交给GridView自己管理需要创建的子Widget。
class GridViewBuildDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _GridViewBuildDemoSate();
}
}
class _GridViewBuildDemoSate extends State<GridViewBuildDemo> {
List<Anchor> anchors = [];
@override
void initState() {
getAnchors().then((anchors){
setState(() {
this.anchors = anchors;
});
});
super.initState();
}
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8),
child: GridView.builder(
shrinkWrap: true,
physics: ClampingScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childAspectRatio: 0.8
),
itemCount: anchors.length,
itemBuilder: (BuildContext context,int index){
return Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expanded(child: Image.network(anchors[index].imageUrl)),
SizedBox(height: 5,),
Text(anchors[index].nickName,style: TextStyle(fontSize: 16),),
Text(anchors[index].roomName,style: TextStyle(fontSize: 14,color: Colors.grey))
],
),
);
},
),
);
}
}
image.png
学习内容来自Flutter从入门到实战
