Flutter框架 GridView

封面图 • 2025-11-02 • Flutter

在 **Flutter** 中，`GridView` 是一个用于创建**网格布局**的组件，适用于展示大量具有相同结构的数据项（如图片、卡片等）。它比 `ListView` 更适合横向和纵向都可能需要滚动的场景。

---

## 🧩 一、GridView 的基本概念

### 1. `GridView` 的类型

Flutter 提供了多种 `GridView` 类型：

| 类型 | 说明 |
|------|------|
| `GridView` | 基础的网格布局，支持自定义列数或动态计算列数 |
| `GridView.count` | 固定列数的网格布局 |
| `GridView.builder` | 按需构建子组件，适合大量数据 |
| `GridView.custom` | 使用自定义的 `SliverGridDelegate` 和 `ChildBuilder`，更灵活 |
| `GridView.extent` | 根据最大宽度自动计算列数 |

---

## 📦 二、GridView 的使用方式

### 1. `GridView.count`

```dart
GridView.count(
  crossAxisCount: 2, // 每行显示 2 列
  children: List.generate(10, (index) {
    return Container(
      color: Colors.blue,
      child: Center(child: Text('Item $index')),
    );
  }),
)
```

### 2. `GridView.builder`

适合大量数据，按需加载：

```dart
GridView.builder(
  itemCount: 20,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3, // 每行显示 3 列
    crossAxisSpacing: 10,
    mainAxisSpacing: 10,
  ),
  itemBuilder: (context, index) {
    return Container(
      color: Colors.green,
      child: Center(child: Text('Item $index')),
    );
  },
)
```

### 3. `GridView.extent`

根据最大宽度自动调整列数：

```dart
GridView.extent(
  maxCrossAxisExtent: 200, // 每列的最大宽度为 200
  children: List.generate(10, (index) {
    return Container(
      color: Colors.red,
      child: Center(child: Text('Item $index')),
    );
  }),
)
```

---

## 🎨 三、常用 `SliverGridDelegate`

`GridView` 使用 `SliverGridDelegate` 来控制子项的布局方式。

### 1. `SliverGridDelegateWithFixedCrossAxisCount`

固定每行的列数：

```dart
SliverGridDelegateWithFixedCrossAxisCount(
  crossAxisCount: 3,
  crossAxisSpacing: 10,
  mainAxisSpacing: 10,
)
```

### 2. `SliverGridDelegateWithMaxCrossAxisExtent`

根据最大宽度自动计算列数：

```dart
SliverGridDelegateWithMaxCrossAxisExtent(
  maxCrossAxisExtent: 200,
  crossAxisSpacing: 10,
  mainAxisSpacing: 10,
)
```

### 3. `SliverGridDelegateWithViewPortFraction`

根据视口比例来控制列数（适合响应式设计）：

```dart
SliverGridDelegateWithViewportFraction(
  viewportFraction: 0.5,
  crossAxisCount: 2,
)
```

---

## 🔄 四、动态数据绑定

通常会结合 `List` 和 `ListView.builder` 或 `GridView.builder` 动态生成内容：

```dart
List<String> items = ['A', 'B', 'C', 'D', 'E'];

GridView.builder(
  itemCount: items.length,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
  itemBuilder: (context, index) {
    return Card(
      child: Center(child: Text(items[index])),
    );
  },
)
```

---

## ✅ 五、常见问题与技巧

### 1. 如何让 GridView 自动适应屏幕？

使用 `LayoutBuilder` 或 `MediaQuery` 获取屏幕尺寸后，设置 `maxCrossAxisExtent` 或 `crossAxisCount`。

### 2. 如何添加点击事件？

在 `itemBuilder` 中包裹 `GestureDetector` 或 `InkWell`：

```dart
GestureDetector(
  onTap: () => print("Tapped item $index"),
  child: Container(...),
)
```

### 3. 如何实现瀑布流布局？

Flutter 默认不支持瀑布流（Waterfall），但可以通过第三方库如 `flutter_staggered_grid_view` 实现。

---

## 📚 六、总结

| 功能 | 说明 |
|------|------|
| `GridView.count` | 固定列数 |
| `GridView.builder` | 按需加载 |
| `SliverGridDelegate` | 控制布局方式 |
| `GridView.extent` | 自动计算列数 |
| 点击事件 | 用 `GestureDetector` 或 `InkWell` |

---

如果你有具体需求（比如图片网格、动态高度、响应式布局等），可以告诉我，我可以提供更详细的示例代码。