Flutter GridView[网格视图]

GridView

主要构建网格视图。在用法上与ListView非常相似，可参照其用法。

该控件主要有一个gridDelegate参数需要设置，该参数类型是SliverGridDelegate，用于控制子项如何排列。该类是一个抽象类，Flutter框架给我们提供了两个子类实现

• SliverGridDelegateWithFixedCrossAxisCount
• SliverGridDelegateWithMaxCrossAxisExtent

与GridView配套的，也有一个GridTile控件，用于网格的子项，它带有页眉和页脚的显示功能。其header、footer参数通常使用GridTileBar控件，该控件属性与ListTile有些类似，可参照ListTile。

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2
  ),
  itemBuilder: (context, index) {
    return GridTile(
      header: GridTileBar(
        backgroundColor:Color.fromRGBO(0, 0, 0, 0.4),
        title: Text('Header'),),
      child: Container(
        child: Image.network(
          'https://gitee.com/arcticfox1919/ImageHosting/raw/master/img/fbb.jpg',
          fit: BoxFit.cover,),
      ),
      footer: GridTileBar(
        backgroundColor:Color.fromRGBO(0, 0, 0, 0.6),
        title: Text('Footer'),),
    );
  },
  itemCount: 20,
)

需要注意，框架的GridView默认子元素显示空间是相等的，但在实际开发中，可能会遇到子元素大小不等的情况，这里推荐一个第三方库实现