Flutter 组件之 SliverGrid

最新推荐文章于 2024-12-17 11:21:49 发布

Tools_are

最新推荐文章于 2024-12-17 11:21:49 发布

阅读量543

点赞数

分类专栏： Flutter 组件文章标签： flutter 前端 android ios

本文链接：https://blog.csdn.net/Tools_are/article/details/129102323

版权

Flutter 组件专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了Flutter中的SliverGrid组件，包括其与GridView的区别、主要属性如delegate和gridDelegate，以及如何使用SliverGridDelegateWithFixedCrossAxisCount和SliverGridDelegateWithMaxCrossAxisExtent设置布局。通过讲解crossAxisCount、mainAxisSpacing、crossAxisSpacing和childAspectRatio等属性，阐述了如何控制子组件的排列方式和间距。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Flutter 组件之 SliverGrid

1.简介

和GridView差不到

2.属性

delegate：两种渲染方式SliverChildListDelegate/SliverChildBuilderDelegate
gridDelegate：SliverGridDelegateWithFixedCrossAxisCount、SliverGridDelegateWithMaxCrossAxisExtent

3.使用

SliverGridDelegateWithFixedCrossAxisCount属性
crossAxisCount：副轴方向child的列数或行数，垂直滚动就是列数，水平滚动就是行数
mainAxisSpacing：主轴方向间隔
crossAxisSpacing：副轴方向间隔
childAspectRatio：child的宽高比
SliverGridDelegateWithMaxCrossAxisExtent属性
maxCrossAxisExtent：副轴方向child的最大长度，例如：值为200，设置垂直滚动，那就是水平方向上child的最大宽度就是200，如果父控件最大允许宽度是500，只能放下2.5个，那么child的宽度就会变成500/3
mainAxisSpacing：主轴方向间隔
crossAxisSpacing：副轴方向间隔
childAspectRatio：child的宽高比

在这里插入图片描述

第二种写法