题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每一天。
重要消息
- 网易云【玩转大前端】配套课程
- EDU配套 教程
- Flutter开发的点滴积累系列文章undefined
GridView 九宫格
在这里插入图片描述1 引言
GridView是常用可滚动组件之一，在Flutter中通常使用GridView构建二维网格列表，GridView创建方法有五种，描述如下
- GridView的构造函数方法，一次性构建所有的子条目，适用于少量数据
- GridView.builder方式来构建，懒加载模式，适用于大量数据的情况
- GridView.count方式来构建，适用于固定列的情况，适用于少量数据 GridView.extent 方式来构建，适用于条目有最大宽度的限制的情况，适用于少量数据的情况下
- GridView.custom 方式来构建，可配置子条目的排列规则也可配置子条目的渲染加载模式
2 滑动组件的公有属性
GridView也是滑动组件系列中的一个，它也有滑动组件一些公用的属性，简单描述如下：
代码语言：txt复制 ///滑动方向
Axis scrollDirection = Axis.vertical,
///是否滑动到底部
bool reverse = false,
///滑动控制器
ScrollController controller,
///是否使用默认的控制器
bool primary,
///滑动到边界时的回弹效果
ScrollPhysics physics,
///内边距
EdgeInsetsGeometry padding,3 通过GridView的构造函数来创建
通过GridView的构造函数来构建，通过参数children来构建GridView中使用到的所有的子条目，通过参数gridDelegate配置SliverGridDelegate来配置子条目的排列规则。
SliverGridDelegate声明为abstract抽象的，所以需要使用它的子类来构建。
SliverGridDelegate有两个直接的子类SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtent。
通过SliverGridDelegateWithFixedCrossAxisCount来构建一个横轴为固定数量的子条目的GridView，如图1所示。
在这里插入图片描述对应代码如下：
代码语言：txt复制///GridView的基本使用
class GridViewBaseUsePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return ScrollHomePageState();
}
}
class ScrollHomePageState extends State {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: Text("GridView基本使用"),
),
///构建九宫格数据数据
body: buildGridView1(),
// body: buildGridView2(),
);
}
///GridView 的基本使用
///通过构造函数来创建
Widget buildGridView1() {
return GridView(
///子Item排列规则
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
//横轴元素个数
crossAxisCount: 3,
//纵轴间距
mainAxisSpacing: 10.0,
//横轴间距
crossAxisSpacing: 10.0,
//子组件宽高长度比例
childAspectRatio: 1.4),
///GridView中使用的子Widegt
children: buildListViewItemList(),
);
}
///GridView 的基本使用
///通过custom方式来创建
Widget buildGridView() {
return GridView.custom(
cacheExtent: 200,
///子Item排列规则
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
///子Item的最大宽度
maxCrossAxisExtent: 100,
//纵轴间距
mainAxisSpacing: 10.0,
//横轴间距
crossAxisSpacing: 10.0,
//子组件宽高长度比例
childAspectRatio: 1.4,
),
///子条目的构建模式
childrenDelegate:
///懒加载的模式
SliverChildBuilderDelegate((BuildContext context, int index) {
return buildListViewItemWidget(index);
}));
}
List<Widget> buildListViewItemList(){
List<Widget> list = [];
///模拟的8条数据
for (int i = 0; i < 8; i ) {
list.add(buildListViewItemWidget(i));
}
return list;
}
///创建GridView使用的子布局
Widget buildListViewItemWidget(int index) {
return new Container(
///内容剧中
alignment: Alignment.center,
///根据角标来动态计算生成不同的背景颜色
color: Colors.cyan[100 * (index % 9)],
child: new Text('grid item $index'),
);
}
}
