Flutter框架 ListView

封面图 • 2025-11-01 • Flutter

在 **Flutter** 框架中，`ListView` 是一个非常常用的小部件（Widget），用于展示一个**可滚动的垂直列表**。它可以包含多个子组件，并且支持动态生成内容。

---

## 📌 一、基本使用

### 1. 简单的 ListView

```dart
ListView(
  children: <Widget>[
    ListTile(title: Text('Item 1')),
    ListTile(title: Text('Item 2')),
    ListTile(title: Text('Item 3')),
  ],
)
```

> 注意：`ListView` 默认会自动滚动，不需要额外设置 `ScrollView`。

---

## 📌 二、动态生成列表项（如从 List 中生成）

```dart
List<String> items = ['Apple', 'Banana', 'Cherry'];

ListView.builder(
  itemCount: items.length,
  itemBuilder: (context, index) {
    return ListTile(title: Text(items[index]));
  },
)
```

- `itemCount`: 列表项的数量。
- `itemBuilder`: 用来构建每个列表项的函数。

---

## 📌 三、常用属性和方法

| 属性 | 说明 |
|------|------|
| `children` | 手动添加多个子组件（适用于静态列表） |
| `itemBuilder` | 动态构建列表项（适用于大量数据或动态内容） |
| `scrollDirection` | 设置滚动方向（默认是垂直方向） |
| `padding` | 设置列表的内边距 |
| `physics` | 控制滚动行为（如 `NeverScrollableScrollPhysics()`） |

---

## 📌 四、示例：带 padding 和 scrollDirection 的 ListView

```dart
ListView(
  scrollDirection: Axis.horizontal, // 水平滚动
  padding: EdgeInsets.all(16),
  children: [
    Container(width: 100, height: 100, color: Colors.red),
    Container(width: 100, height: 100, color: Colors.green),
    Container(width: 100, height: 100, color: Colors.blue),
  ],
)
```

---

## 📌 五、常见问题

### ✅ 为什么我的 ListView 不显示？

- 如果你使用的是 `ListView` 而不是 `SingleChildScrollView`，它必须放在一个**有限高度的容器**中，否则会报错。
- 如果你想让 `ListView` 自动填充整个屏幕，可以使用 `Scaffold` 包裹，并将 `ListView` 放在 `body` 中。

---

## 📌 六、性能优化建议

- 对于**大量数据**，推荐使用 `ListView.builder()` 或 `ListView.separated()`，避免一次性加载所有 widget。
- 使用 `ListView` 时，确保其父容器有明确的高度，否则会报错。

---

## 📌 七、其他相关组件

- `ListView.separated()`：可以在列表项之间插入分隔符。
- `ListView.builder()`：动态构建列表项。
- `ListView.custom()`：自定义布局（需要配合 `Sliver` 使用）。

---

## 📌 八、示例：使用 `ListView.separated`

```dart
ListView.separated(
  itemCount: 5,
  separatorBuilder: (context, index) => Divider(height: 1),
  itemBuilder: (context, index) {
    return ListTile(title: Text('Item $index'));
  },
)
```

---

如果你有具体需求（比如动态数据、网格布局、下拉刷新等），我也可以帮你进一步实现。欢迎继续提问！