Flutter 零基础入门（三十）：GridView 网格布局 —— 九宫格与商品列表必学

LarryLan

发布于 2026-01-27 14:59:22

1372

GridView 网格布局 —— 九宫格与商品列表必学

如果说 ListView 是「信息流之王」，那 GridView 就是：

电商 App、图片墙、九宫格页面的绝对核心

你在 App 中看到的这些页面：

商品列表
九宫格入口
图片瀑布流
功能面板

📌 本质上，全都是 GridView。

一、什么是 GridView？

一句话理解：

GridView = 可以滚动的网格布局

对比一下：

组件	布局方式
ListView	一列
GridView	多列

二、最常见的使用场景

你以后几乎一定会用到 GridView 的地方：

首页九宫格入口
商品列表页
图片展示页
分类页面

三、GridView.count（最容易上手）

这是 新手最推荐的写法。

1️⃣ 基本结构

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]);
  },
);

📌 记住一句话：