Flutter（二十四）GridView

GridView与ListView的区别

以垂直方向为例，GridView每行可以展示多个item，ListView每行只能显示1个item。因此GridView属性中多来了gridDelegate，主要用于计算每行显示item的算法。

GridDelegate分类

• SliverGridDelegateWithFixedCrossAxisCount，直接指定每行显示几个item
  • crossAxisCount，每行显示item的个数
  • mainAxisSpacing = 0.0,主轴方向上，item之间间距
  • crossAxisSpacing = 0.0,纵轴方向上，item之间的距离
  • childAspectRatio = 1.0,纵轴item的高度=childAspectRatio*横轴的item长度
• SliverGridDelegateWithMaxCrossAxisExtent，指定每个item的最大长度，然后计算出每行显示item的个数。
  • maxCrossAxisExtent,限定每个item最大长度。比如屏幕宽400，最大长度限定300和限定是100时，每行显示个数肯定是不同的，具体多少需要计算。
  • mainAxisSpacing = 0.0,主轴方向上，item之间间距
  • crossAxisSpacing = 0.0,纵轴方向上，item之间的距离
  • childAspectRatio = 1.0,纵轴item的高度=childAspectRatio*横轴的item长度

构造方法

• 默认构造方法GridView()，显示少量数据，一次性全部绘制。内部可以指定使用那个GridDelegate。
• GridView.count()，在默认构造方法基础上，指定使用了SliverGridDelegateWithFixedCrossAxisCount
• GridView.extent()，在默认构造方法基础上，指定使用了SliverGridDelegateWithMaxCrossAxisExtent
• GridView.builder()，适合大量数据，懒加载形式。可以指定使用哪个GridDelegate，并提供itemBuilder构建每个item的widget

image.png

默认构造方法

class _MyHomePageState2 extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    List<String> list = <String>[];
    for (var i = 0; i < 150; i++) {
      list.add(i.toString());
    }
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: GridView(
        scrollDirection: Axis.vertical, // 滚动方向
        cacheExtent: 40, // 在超出边界指定值内，缓存item
        shrinkWrap: true,
        padding: EdgeInsets.all(10),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 4, //主轴方向上，展示item的个数
            mainAxisSpacing:
                10, // 主轴方向上，item之间间距  通过crossAxisCount和mainAxisSpacing就能确定主轴方向item的长度
            crossAxisSpacing: 10, // 纵轴方向上，item之间的距离
            childAspectRatio: 1.5), //纵轴的高度=childAspectRatio*横轴的长度
        children: list
            .map((item) => Container(
                  color: Colors.red[200],
                  child: Text(
                    item,
                    style: TextStyle(fontSize: 16),
                  ),
                ))
            .toList(),
      ),
    );
  }
}

GridView.count()

class _MyHomePageState3 extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    List<String> list = <String>[];
    for (var i = 0; i < 150; i++) {
      list.add(i.toString());
    }
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: GridView.count(
        scrollDirection: Axis.vertical, // 滚动方向
        cacheExtent: 40, // 在超出边界指定值内，缓存item
        shrinkWrap: true,
        padding: EdgeInsets.all(10),
        crossAxisCount: 4, //主轴方向上，展示item的个数
        mainAxisSpacing:
            10, // 主轴方向上，item之间间距  通过crossAxisCount和mainAxisSpacing就能确定主轴方向item的长度
        crossAxisSpacing: 10, // 纵轴方向上，item之间的距离
        childAspectRatio: 1.5, //纵轴的高度=childAspectRatio*横轴的长度

        children: list
            .map((item) => Container(
                  color: Colors.red[200],
                  child: Text(
                    item,
                    style: TextStyle(fontSize: 16),
                  ),
                ))
            .toList(),
      ),
    );
  }
}

GridView.extent()

class _MyHomePageState4 extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    List<String> list = <String>[];
    for (var i = 0; i < 150; i++) {
      list.add(i.toString());
    }
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: GridView.extent(
        scrollDirection: Axis.vertical, // 滚动方向
        shrinkWrap: true,
        padding: EdgeInsets.all(10),
        maxCrossAxisExtent: 100, //主轴方向上，限定来1个item的最大显示长度，实际长度还是要经过计算，显示个数肯定是个整数，并且均分长度
        mainAxisSpacing:
        10, // 主轴方向上，item之间间距  通过crossAxisCount和mainAxisSpacing就能确定主轴方向item的长度
        crossAxisSpacing: 10, // 纵轴方向上，item之间的距离
        childAspectRatio: 1.5, //纵轴的高度=childAspectRatio*横轴的长度

        children: list
            .map((item) => Container(
          color: Colors.red[200],
          child: Text(
            item,
            style: TextStyle(fontSize: 16),
          ),
        ))
            .toList(),
      ),
    );
  }
}

GridView.builder()

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    List<String> list = <String>[];
    for (var i = 0; i < 150; i++) {
      list.add(i.toString());
    }
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: GridView.builder(
        scrollDirection: Axis.vertical, // 滚动方向
        cacheExtent: 40, // 在超出边界指定值内，缓存item
        shrinkWrap: true,
        padding: EdgeInsets.all(10),
        itemCount: list.length,
        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 154, //主轴方向上，展示item的个数
            mainAxisSpacing:
            10, // 主轴方向上，item之间间距  通过crossAxisCount和mainAxisSpacing就能确定主轴方向item的长度
            crossAxisSpacing: 10, // 纵轴方向上，item之间的距离
            childAspectRatio: 1.5), //纵轴的高度=childAspectRatio*横轴的长度
        itemBuilder: (BuildContext context, int index) {
          print(index.toString());
          return Container(
            color: Colors.red[200],
            child: Text(
              list[index],
              style: TextStyle(fontSize: 16),
            ),
          );
        },
      ),
    );
  }
}