如何使用SliverGrid组件

原创于 2025-02-02 21:15:00 发布 · 1.1k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#移动开发Flutter

一起Talk Flutter吧专栏收录该内容

961 篇文章

订阅专栏

文章目录

1 概念介绍
2 使用方法
3 示例代码

我们在上一章回中介绍了SliverList组件相关的内容，本章回中将介绍SliverGrid组件.闲话休提，让我们一起Talk Flutter吧。

在这里插入图片描述

1 概念介绍

我们在本章回中介绍的SliverGrid组件是一种网格类组件，主要用来创建网格类布局，它和GridView组件类似，它们的不同之处在于SliverGrid组件可以被当作一
个整体来滑动。我们将在本章回中详细介绍SliverGrid组件的使用方法。

2 使用方法

和其它组件一样,SliverGrid组件提供了相关的属性来控制自己，不过它的属性只有三个：- key属性；- delegate属性; - gridDelegate属性；
我们先看一下delegate属性。该属性是SliverChildDelegate类型，不过这个类是一个抽象类，无法创建实例，它有两个实现类,详细如下：

SliverChildBuilderDelegatet - SliverChildListDelegate.
关于SliverChildDelegate类和它的两个子类是不是很熟悉，没错!我们在上一章回中刚刚介绍过它们，因此这里就不再介绍了。我们重点介绍gridDelegate属性，
该属性是SliverGridDelegate类型，不过这个类是一个抽象类，无法创建实例，它有两个实现类,详细如下：

SliverGridDelegateWithFixedCrossAxisCount, 该类提供了五个属性，详细的名称和功能如下：

crossAxisCount属性：用来控制主轴上显示内容的数量；
mainAxisSpacing属性：用来控制主轴上显示内容的空间,相当于行距
crossAxisSpacing属性：用来控制交叉轴上显示内容的空间,相当于列距
childAspectRatio属性：用来控制显示的宽高比；
mainAxisExtent属性：用来控制主轴外显示内容的扩展空间，

SliverGridDelegateWithMaxCrossAxisExtent,该类提供了五个属性，详细的名称和功能如下：

maxCrossAxisExtent属性用来控制主轴上最大可以显示的内容数量；
mainAxisSpacing属性：用来控制主轴上显示内容的空间,相当于行距;
crossAxisSpacing属性：用来控制交叉轴上显示内容的空间,相当于列距
childAspectRatio属性：用来控制显示的宽高比；
mainAxisExtent属性：用来控制主轴外显示内容的扩展空间;
这两个类的用法比较类似，它们的区别在于：第一个类使用了固定的数量来限制主轴上显示内容的数量，第二个类则是依据显示内容的大小和空间自动调整主轴上显示内容
的数量，如果数量超过最大值就换行显示。介绍完使用方法后，我们将在在后面的小节中给出示例代码来演示具体的使用方法。

3 示例代码

///不使用工厂方法，直接使用SliverGrid的构造方法
SliverGrid(
  ///Grid中显示的内容,可以使用BuilderDelete直接创建显示内容，或者使用已经有的list
  delegate: SliverChildBuilderDelegate((context,index){
    return const Icon(Icons.face_3_outlined); },
  childCount: 20,
  ),
  ///配置Grid的相关属性，
  gridDelegate:const SliverGridDelegateWithFixedCrossAxisCount(
    ///主轴上显示内容的空间设置,相当于行距
    mainAxisExtent: 20,
    mainAxisSpacing: 20,
    ///交叉轴显示内容的数量，这里相当于4列
    crossAxisCount: 4,
    ///交叉轴上显示内容的空间设置
    crossAxisSpacing: 20,
    ///显示内容的宽高比
    childAspectRatio: 1.2,
  ),
),
///不使用工厂方法，直接使用SliverGrid的构造方法,和上一个类似，只是创建显示内容的方法不同
SliverGrid(
  ///Grid中显示的内容,可以使用BuilderDelete直接创建显示内容，或者使用已经有的list
  delegate: SliverChildListDelegate(
    List.generate(20,
          (index) => const Icon(Icons.camera,color: Colors.blue,),),
  ),
  ///配置Grid的相关属性，同上。不同之处在于交叉轴显示内容的数量不固定，而是与空间有关
  gridDelegate:const SliverGridDelegateWithMaxCrossAxisExtent(
    maxCrossAxisExtent: 40,
    mainAxisExtent: 40,
    mainAxisSpacing: 20,
    crossAxisSpacing: 5,
    childAspectRatio: 1.6,
  ),
),

上面的示例代码中演示了两种delegate属性和两种gridDelegate属性的赋值方法，两种delegate属性创建的都是Icon组件。不过gridDelegate属性的配置不同，
在主轴上显示的icon数量也不同。依据目前的知识我们还不能演示程序的运行结果，因为还需要其它组件配合才可以运行，大家不用担心，目前只需要熟练掌握如何创建
SliverGrid组件就可以了，我们在后面章回中会使用本章回创建的组件给大家演示程序运行效果。
看官们，与"SliverGrid组件"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!