针对笔记四关于ListView的联系操作，其实在组件数据操作上都是大同小异的，唯一不同的就是Gridview创建的方式上，常用的两种方式：GridView.count()，
GridView.count()方式实现表格布局
属性介绍：
| 属性 | 类型 | 说明 |
|---|---|---|
| crossAxisSpacing | double | 水平子Widget之间的间距 |
| mainAxisSpacing | double | 垂直子Widge之间的间距 |
| crossAxisCount | int | 表格布局列的数量 |
| childAspectRatio | double | 子widget宽高比例 |
| children | <Widget>[] | 表格布局展示的数据-》包含数据的视图集合 |
| scrollDirection | Axis | 滚动方法 |
| resolve | bool | 组件反向排序 |
| padding | EdgeInsertsGeometry | 内边距 |
| gridDelegate | SliverGridDelegateWithFixedCossAxisCount(常用)/ SliverGridDelegateWithMaxCrossAxisExtent | 控制布局主要用在GridView.Bulider()里边 |
针对GridView.count()方式来实现表格的展示
/**
* 获取GridView的方法
*/
GridView _getGridViewByCount(List list) {
return GridView.count(
crossAxisCount: 2, //表格布局的列
children: _getListWidget(list), //表格布局展示的数据-》包含数据的视图集合
crossAxisSpacing: 5.0, //水平子Widget之间的间距
mainAxisSpacing: 5.0, //垂直子Widge之间的间距
childAspectRatio: 1.0,//子widget宽高比例
);
}
/**
* 获取子widget的集合
*/
List<Widget> _getListWidget(List list) {
var temple = list.map((value) {
return Container(
alignment: Alignment.center,
color: Colors.blue,
margin: EdgeInsets.all(10.0),
child: ListTile(
title: Text(value["title"]),
subtitle: Text(value["author"]),
leading: Icon(Icons.settings),
),
);
});
return temple.toList();
}
运行结果图：
92001.png
GridView.builder()方式实现表格布局
/**
* 获取GridView的方法
*/
GridView _getGridViewByBuilder(BuildContext context) {
return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 5.0,
mainAxisSpacing: 5.0,
),//这是GridView的属性，这一点与GridView.count()方式是有区别的
itemBuilder: _getData,//构建包含数据的widget，自身遍历集合切返回含数据的widget
itemCount: listData.length,//数据的长度
);
}
/**
* 获取包含数据的widget
*/
Widget _getData(context, index) {
return Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.blue,
border: Border.all(color: Colors.red, width: 2.0),
borderRadius: BorderRadius.circular(5.0)),
margin: EdgeInsets.all(10.0),
child: ListTile(
title: Text(listData[index]["title"]),
subtitle: Text(listData[index]["author"]),
leading: Icon(Icons.settings),
),
);
}
通过GridView.builder()方式创建的gridview需要主要的关键点：
- 创建方式：GridView.builder()
- 操作数据视图的方式： itemBuilder: Widget -》自带遍历方法
- GridView属性设置方式：通过gridDelegate参数来完成,且传入参数为SliverGridDelegateWithFixedCrossAxisCount类型,在SliverGridDelegateWithFixedCrossAxisCount中进行GridView属性的配置
运行结果：
92002.png
至此Gridview展示数据暂时完成！后续复杂的操作在进行深入研究！
