Flutter中GridView网格列表组件的使用

已于 2025-08-05 08:53:45 修改
阅读量1.6k 收藏 4
点赞数 1
CC 4.0 BY-SA版权
分类专栏： Flutter 文章标签： 移动端开发 Flutter
于 2020-12-19 00:20:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40629244/article/details/111398575
本文介绍了在Flutter中使用GridView构建网格布局的方法，包括GridView.count和GridView.builder两种方式。详细讲解了各种关键属性，如scrollDirection、childAspectRatio等，并通过实例展示了数据动态生成的网格效果。

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

当数据量很大的时候用矩阵方式排列比较清晰，此时我们可以用网格列表组件 GridView 实现布局。

GridView 创建网格列表有多种方式，主要有以下两种：

1. GridView.count 实现网格布局

2. GridView.builder 实现网格布局

常用属性：

1. scrollDirection 滚动方向

2. padding 内边距

3. reverse 反向排序

4. crossAxisSpacing 水平子组件的内边距

5. mainAxisSpacing 垂直子组件的内边距

6. crossAxisCount 一行的子组件的数量

7. childAspectRatio 子组件的宽高比例

了解本专栏 订阅专栏 解锁全文 超级会员免费看
【Flutter】GridView的使用之GridView.count
开发简记
07-06 6963
GridView属于一种比较常见的布局，这里有必要说一下他的常见用法。 简单使用 class GridViewDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Padding( padding: const EdgeInsets.all(10), ...
Flutter学习-网格列表
weixin_45376030的博客
11-17 199
//引入库 import 'package:flutter/material.dart'; //主函数 void main() => runApp(MyApp()); //类，继承无状态组件 class MyApp extends StatelessWidget { //重写函数 @override //返回值为Widget类型 Widget build(BuildCon...
flutter 简单的网格列表
weixin_44911775的博客
12-06 421
flutter 简单的网格列表
Flutter技巧：使用flutter_layout_grid实现内容自适应的GridView布局
最新发布
gitblog_00790的博客
06-25 315
Flutter技巧：使用flutter_layout_grid实现内容自适应的GridView布局 前言 在Flutter应用开发中，GridView是展示网格布局的常用组件。然而，当我们需要创建内容自适应的网格布局时，传统的GridView组件可能会遇到一些挑战。本文将深入探讨如何利用flutter_layout_grid包实现真正的内容自适应网格布局。 传统GridView的局限性 使用标准的...
【Flutter】列表组件ListView&网格布局组件GridView&Padding组件
一以贯之的努力 不得懈怠的人生
05-24 1792
介绍了列表组件ListView、网格布局组件GridView以及Padding组件的使用。
【Flutter】GridView 网格布局 ( GridView.count 构造函数 | crossAxisCount 参数指定每行元素个数 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
08-27 2325
一、GridView 网格布局简介、 二、完整代码示例、 三、相关资源、
Flutter GridView网格布局
10-05
GridView 是一个网格布局的列组件。GridView 继承至 CustomScrollView，有 CustomScrollView 的特性。
Flutter 列表组件ListView 网格布局组件GridView
lvlemo的博客
11-28 1060
持垂直和水平方向展示。通过一个属性就可以控制列表的显示方向。列表布局是我们项目开发中最常用的一种布局方式。Axis.horizontal水平列表。Axis.vertical垂直列表。
Flutter：GridView组件及动态GridView
weixin_46136019的博客
03-13 1391
我们常用的创建网格列表的方式有两种：1.通过 GridView.count 实现网格布局2.通过 GridView.builder 实现网格布局。
【Flutter】使用GridView实现二维网格列表
sinat_36955332的博客
09-21 693
1 GridView构造函数 GridView({ Axis scrollDirection = Axis.vertical, bool reverse = false, ScrollController controller, bool primary, ScrollPhysics physics, bool shrinkWrap = false, EdgeInsetsGeometry padding, @required SliverGridDelegate gridDe
Flutter GridView
jiahua123_dongzhou的博客
09-02 378
Flutter GridView常用属性、 4种使用方式的区别 GridView()、GridView.count()、GridView.extent() 这三种和GridView.builder()的区别在于： GridView都需要一个Widget数组作为其子元素，前三种方式都会提前将所有子widget都构建好，所以只适用于子Widget数量比较少 当子widget比较多时，我们可以通过GridView.builder来动态创建子Widget。 常用属性 属性名 功能 值所属类型 s
Flutter-GridView
IT技术专栏
08-07 816
// 服务页item Widget _buildGridService() { return Scaffold( appBar: AppBar( elevation: 8.0, //阴影的高度 title: Text('便民服务'), backgroundColor: MyColors.color_red, ce...
Flutter - GridView
a136447572的专栏
12-14 418
GridView 在构建是,有两种方式。GridView 表格类布局。
flutter中的gridview
zhakesipailuo的博客
04-17 886
gridview在移动应用中的使用非常的广泛，主要用于商品或其他类信息的展示； flutter中的gridview的使用实例如下： 1 创建gridview类 （其中包含两个方法 一个返回card对象 一个返回gridview对象） /** * 创建一个mygridview类 * 创建方法返回单个card对象 * 创建方法返回含有若干card对象的gridview */ class M...
Flutter UI基础 - GridView
迦南的专栏
07-30 496
GridView GridView可以构建一个二维网格列表，其默认构造函数定义如下： GridView({ Axis scrollDirection = Axis.vertical, bool reverse = false, ScrollController controller, bool primary, ScrollPhysics physics, bool shrinkWrap = false, EdgeInsetsGeometry padding, @req
Flutter开发之GridView组件（20）
沐雨07的专栏
07-01 731
GridView
flutter 实战 之 GridView
wniuniu_的博客
07-29 3040
如何利用 GridView.
Flutter GridView 组件：动态 GridView 详解
m0_57836225的博客
03-10 1614
在 Flutter 开发中，GridView组件是用于展示网格布局的常用组件。它能以网格形式排列子项，在构建图片墙、商品列表等场景中应用广泛。本文将深入讲解GridView组件，尤其是动态GridView，并结合代码示例帮助理解。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

艾光远

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值