截图按钮图标素材网站,淄博网站制作定制推广,凡科建站的模板 怎么弄下来,深圳手机网站制作价钱文章目录 1 概念介绍2 使用方法3 示例代码 我们在上一章回中介绍了SliverList组件相关的内容#xff0c;本章回中将介绍SliverGrid组件.闲话休提#xff0c;让我们一起Talk Flutter吧。 1 概念介绍
我们在本章回中介绍的SliverGrid组件是一种网格类组件#xff0c;主要用来… 文章目录 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直接创建显示内容或者使用已经有的listdelegate: 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直接创建显示内容或者使用已经有的listdelegate: 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组件相关的内容就介绍到这里欢迎大家在评论区交流与讨论!
