Flutter学习笔记（五）：Gridview组件

针对笔记四关于ListView的联系操作，其实在组件数据操作上都是大同小异的，唯一不同的就是Gridview创建的方式上，常用的两种方式：GridView.count()，

GridView.count()方式实现表格布局

属性介绍：

属性	类型	说明
crossAxisSpacing	double	水平子Widget之间的间距
mainAxisSpacing	double	垂直子Widge之间的间距
crossAxisCount	int	表格布局列的数量
childAspectRatio	double	子widget宽高比例
children	[]	表格布局展示的数据-》包含数据的视图集合
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 _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展示数据暂时完成！后续复杂的操作在进行深入研究！