Flutter——最详细(GridView)使用教程

可以创建网格列表视图；主要通过Count、extent、custom、builder构造列表。有内边距、是否反向、滑动控制器等属性。
四个属性使用场景，Count、extent、custom适用于子布局较少时使用。可能会用到上拉刷新，数据较多时，则使用builder属性。

• 使用场景：

列如：支付宝首页的网格布局，等一系列网格样式的UI都可以使用该组件

属性	作用
scrollDirection	滚动方向
crossAxisCount	主轴一行的数量
mainAxisSpacing	主轴每行间距
crossAxisSpacing	交叉轴每行间距
childAspectRatio	item的宽高比1 / 2

class CustomGridView extends StatelessWidget {
  final data = List.generate(128, (i) => Color(0xFFFF00FF - 2 * i));

  @override
  Widget build(BuildContext context) {
    return Container(
      child: GridView.count(
        crossAxisCount: 3,
        mainAxisSpacing: 12,
        crossAxisSpacing: 20,
        childAspectRatio: 1 / 0.5,
        children: data.map((color) => _buildItem(color)).toList(),
      ),
    );
  }

  Container _buildItem(Color color) => Container(
        alignment: Alignment.center,
        width: 100,
        height: 30,
        color: color,
        child: Text(
          colorString(color),
          style: TextStyle(color: Colors.white, shadows: [
            Shadow(color: Colors.black, offset: Offset(.5, .5), blurRadius: 2)
          ]),
        ),
      );

  String colorString(Color color) =>
      "#${color.value.toRadixString(16).padLeft(8, '0').toUpperCase()}";
}

可以看到，每行展示3个item，主轴间距20，横轴间距12。item的宽度是高度的2倍

布局横轴滑动

 GridView.builder(
        itemCount: data.length,
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          mainAxisSpacing: 12,
          crossAxisSpacing: 20,
          childAspectRatio: 1 / 0.7,
        ),
        itemBuilder: (_, position) => _buildItem(data[position]),
      )

这个效果，宽度与高度的比例是1/0.7。

项目地址

https://github.com/z244370114/flutter_demo