Flutter 零基础入门（三十）：GridView 网格布局 ------ 九宫格与商品列表必学
如果说 ListView 是「信息流之王」，
那 GridView 就是：
电商 App、图片墙、九宫格页面的绝对核心
你在 App 中看到的这些页面：
- 商品列表
- 九宫格入口
- 图片瀑布流
- 功能面板
📌 本质上，全都是 GridView。
一、什么是 GridView？
一句话理解：
GridView = 可以滚动的网格布局
对比一下：
| 组件 | 布局方式 |
|---|---|
| ListView | 一列 |
| GridView | 多列 |
二、最常见的使用场景
你以后几乎一定会用到 GridView 的地方：
- 首页九宫格入口
- 商品列表页
- 图片展示页
- 分类页面
三、GridView.count（最容易上手）
这是 新手最推荐的写法。
1️⃣ 基本结构
dart
GridView.count(
crossAxisCount: 2,
children: [],
)📌 参数解释：
crossAxisCount：一行多少列
2️⃣ 一个最简单的示例
GridView.count(
crossAxisCount: 3,
children: [
Container(color: Colors.red),
Container(color: Colors.blue),
Container(color: Colors.green),
Container(color: Colors.orange),
],
)你会看到：
- 一行 3 个
- 自动换行
- 可以滚动
四、GridView + List 数据渲染
和 ListView 一样，
GridView 也几乎一定是配合 List 使用的。
1️⃣ 数据准备
List<String> imageList = [
'商品1',
'商品2',
'商品3',
'商品4',
'商品5',
];2️⃣ 使用 map 生成网格
GridView.count(
crossAxisCount: 2,
children: imageList.map((item) {
return Container(
margin: EdgeInsets.all(8),
color: Colors.grey[300],
child: Center(
child: Text(item),
),
);
}).toList(),
)📌 你会发现：
GridView 和 ListView 的使用方式几乎一模一样
五、GridView 的常用参数（非常重要）
1️⃣ 主轴 / 交叉轴间距
GridView.count(
crossAxisCount: 2,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
)mainAxisSpacing：纵向间距crossAxisSpacing：横向间距
2️⃣ 子元素宽高比（关键）
childAspectRatio: 0.7,📌 含义：
宽 / 高
1.0：正方形< 1：偏高（商品卡片常用）> 1：偏宽
六、封装商品卡片（真实项目写法）
1️⃣ 商品卡片 Widget
Widget buildGridItem(String title) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
boxShadow: [
BoxShadow(
color: Colors.black12,
blurRadius: 4,
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 图片区域
Expanded(
child: Container(
color: Colors.grey[300],
child: Center(child: Text('图片')),
),
),
Padding(
padding: EdgeInsets.all(8),
child: Text(
title,
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
),
],
),
);
}2️⃣ GridView 使用卡片
GridView.count(
crossAxisCount: 2,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childAspectRatio: 0.7,
padding: EdgeInsets.all(10),
children: imageList.map((item) {
return buildGridItem(item);
}).toList(),
)📌 到这里，你已经写出了一个标准商品列表页。
七、GridView.builder（企业级必会）
当数据很多时：
👉 必须使用 GridView.builder
示例写法
GridView.builder(
itemCount: imageList.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
childAspectRatio: 0.7,
),
itemBuilder: (context, index) {
return buildGridItem(imageList[index]);
},
);📌 记住一句话：
builder = 性能更好 + 真正项目写法
八、GridView 常见踩坑点
❌ GridView 放 Column 里不限制高度
❌ 忘记设置 childAspectRatio 导致变形
❌ GridView 嵌套 GridView
❌ 所有逻辑写在 build 里
❌ 不封装网格项
九、本篇你真正掌握了什么？
你已经学会：
- GridView.count 的使用
- GridView.builder 的标准写法
- 网格间距 & 宽高比控制
- 商品卡片封装
- 九宫格 / 商品页结构
📌 到这里：
你已经可以独立完成电商类页面布局
十、一句话总结
GridView = 多列 ListView
真正的难点在"卡片设计"
🔜 下一篇预告
《Flutter 零基础入门（三十一）：Stack 与 Positioned ------ 悬浮、角标与覆盖布局》
下一篇我们将学习：
- Stack 的核心思想
- Positioned 精准定位
- 角标 / 悬浮按钮
- 真实 App 的覆盖效果
🚀 UI 能力将再上一个台阶