Flutter-GridView组件

GridView用于展示多列的展示，在开发中也非常常见，比如直播App中的主播列表、电商中的商品列表等等。

1. GridView构造函数

一种使用GridView的方式就是使用构造函数来创建，和ListView对比有一个特殊的参数：gridDelegate
gridDelegate用于控制交叉轴的item数量或者宽度，需要传入的类型是SliverGridDelegate，但是它是一个抽象类，所以我们需要传入它的子类

SliverGridDelegateWithFixedCrossAxisCount

SliverGridDelegateWithFixedCrossAxisCount({
  @requireddouble crossAxisCount, // 交叉轴的item个数
  double mainAxisSpacing = 0.0, // 主轴的间距
  double crossAxisSpacing = 0.0, // 交叉轴的间距
  double childAspectRatio = 1.0, // 子Widget的宽高比
})

代码演练：

class MyHomeBody extends StatelessWidget {

  List<Widget> getGridWidgets() {
    return List.generate(100, (index){
      return Container(
        color: Colors.purple,
        alignment: Alignment(0, 0),
        child: Text("item $index",style: TextStyle(fontSize: 20,color: Colors.white),),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return GridView(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
        childAspectRatio: 1.0
      ),
      children: getGridWidgets(),
    );
  }
}

image.png

SliverGridDelegateWithMaxCrossAxisExtent

SliverGridDelegateWithMaxCrossAxisExtent({
  double maxCrossAxisExtent, // 交叉轴的item宽度
  double mainAxisSpacing = 0.0, // 主轴的间距
  double crossAxisSpacing = 0.0, // 交叉轴的间距
  double childAspectRatio = 1.0, // 子Widget的宽高比
})

代码演练：

class MyHomeBody extends StatelessWidget {

  List<Widget> getGridWidgets() {
    return List.generate(100, (index){
      return Container(
        color: Colors.purple,
        alignment: Alignment(0, 0),
        child: Text("item $index",style: TextStyle(fontSize: 20,color: Colors.white),),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return GridView(
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
          maxCrossAxisExtent: 100,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
        childAspectRatio: 1.5
      ),
      children: getGridWidgets(),
    );
  }
}

image.png

前面两种方式也可以不设置delegate
可以分别使用：GridView.count构造函数和GridView.extent构造函数实现相同的效果，这里不再赘述。

2. GridView.build

和ListView一样，使用构造函数会一次性创建所有的子Widget，会带来性能问题，所以我们可以使用GridView.build来交给GridView自己管理需要创建的子Widget。

class GridViewBuildDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _GridViewBuildDemoSate();
  }
}

class _GridViewBuildDemoSate extends State<GridViewBuildDemo> {

  List<Anchor> anchors = [];

  @override
  void initState() {
    getAnchors().then((anchors){
      setState(() {
        this.anchors = anchors;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8),
      child: GridView.builder(
          shrinkWrap: true,
          physics: ClampingScrollPhysics(),
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            mainAxisSpacing: 10,
            crossAxisSpacing: 10,
            childAspectRatio: 0.8
          ),
          itemCount: anchors.length,
          itemBuilder: (BuildContext context,int index){
            return Container(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Expanded(child: Image.network(anchors[index].imageUrl)),
                  SizedBox(height: 5,),
                  Text(anchors[index].nickName,style: TextStyle(fontSize: 16),),
                  Text(anchors[index].roomName,style: TextStyle(fontSize: 14,color: Colors.grey))
                ],
              ),
            );
          },
      ),
    );
  }
}

image.png

学习内容来自Flutter从入门到实战