Flutter GridView网格布局几种不同的方式神仙操作

最新推荐文章于 2025-06-25 09:12:31 发布

jq@520

最新推荐文章于 2025-06-25 09:12:31 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Flutter 文章标签： Flutter GridView

本文链接：https://blog.csdn.net/weixin_38025168/article/details/103530755

Flutter 专栏收录该内容

36 篇文章

订阅专栏

本文深入解析Flutter中GridView的四种常用布局方法，包括GridView.count、GridView.builder结合SliverGridDelegateWithFixedCrossAxisCount、GridView.builder结合SliverGridDelegateWithMaxCrossAxisExtent及GridView.custom的使用技巧，为开发者提供丰富的网格布局实现方案。

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

一般方法2 和方法 3使用的比较多

写法1

GridView.count(
      //水平子Widget之间间距
      crossAxisSpacing: 10.0,
      //垂直子Widget之间间距
      mainAxisSpacing: 10.0,
      //GridView内边距
      padding: EdgeInsets.all(0.0),
      //一行的Widget数量
      crossAxisCount: 5,
      //子Widget宽高比例
      childAspectRatio: 1.0,
      //子Widget列表
      children:widgetList(),
    );

写法2

GridView.builder(
        itemCount: datas.length,
        //SliverGridDelegateWithFixedCrossAxisCount 构建一个横轴固定数量Widget
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            //横轴元素个数
            crossAxisCount: 5,
            //纵轴间距
            mainAxisSpacing: 10.0,
            //横轴间距
            crossAxisSpacing: 10.0,
            //子组件宽高长度比例
            childAspectRatio: 1.0),
        itemBuilder: (BuildContext context, int index) {
          return getItemContainer(datas[index]);
        })

写法3

GridView.builder(
      itemCount: datas.length,
      itemBuilder: (BuildContext context, int index) {
        return getItemContainer(datas[index]);
      },
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        //单个子Widget的水平最大宽度
        maxCrossAxisExtent: 100,
        //水平单个子Widget之间间距
        mainAxisSpacing: 10.0,
        //垂直单个子Widget之间间距
        crossAxisSpacing: 10.0
      ),
    );

写法4

GridView.custom(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(    
        crossAxisCount: 5, 
        mainAxisSpacing: 10.0, 
        crossAxisSpacing: 10.0, 
    ),
    childrenDelegate: SliverChildBuilderDelegate((context, position) {
         return getItemContainer(datas[position]);
     }, 
    childCount: datas.length,),
)