Flutter框架 CustomScrollView 和 Slivers

封面图 • 2025-11-03 • Flutter

在 Flutter 框架中，`CustomScrollView` 和 `Slivers` 是用于构建复杂滚动视图的重要组件。它们允许你创建高度定制的滚动行为，比如嵌套滚动、分段滚动（如头部固定、内容滚动）、混合不同类型的滚动组件等。

---

## 一、什么是 `CustomScrollView`？

`CustomScrollView` 是一个可以包含多个 **slivers** 的滚动容器。它不像 `ListView` 或 `GridView` 那样只能使用单一的滚动类型，而是支持多种不同的 sliver 类型组合，从而实现更复杂的布局。

### 基本结构：

```dart
CustomScrollView(
  slivers: <Widget>[
    // 多个 Sliver 组件
  ],
)
```

---

## 二、什么是 Sliver？

Sliver 是一种特殊的 widget，它被设计用于在 `CustomScrollView` 中进行滚动。每个 sliver 只负责渲染其自身的一部分内容，并且可以与其它 sliver 之间进行交互（例如：滚动同步）。

### 常见的 Sliver 类型：

| Sliver 类型 | 说明 |
|-------------|------|
| `SliverAppBar` | 可以展开/收缩的 App Bar，常用于顶部导航栏 |
| `SliverList` | 用于显示列表内容 |
| `SliverGrid` | 用于显示网格布局 |
| `SliverPadding` | 为其他 sliver 添加 padding |
| `SliverToBoxAdapter` | 将普通 widget 包装成 sliver |
| `SliverPersistentHeader` | 可以固定在顶部的 header |
| `SliverChildBuilderDelegate` | 动态构建子 sliver |

---

## 三、使用示例

### 示例 1：简单使用 `CustomScrollView`

```dart
CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      title: Text('Custom Scroll View'),
      floating: true,
      snap: true,
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return ListTile(title: Text("Item $index"));
        },
        childCount: 20,
      ),
    ),
  ],
)
```

### 示例 2：使用 `SliverToBoxAdapter` 添加一个非 sliver 的 widget

```dart
CustomScrollView(
  slivers: <Widget>[
    SliverAppBar(
      title: Text('Custom Scroll View'),
    ),
    SliverToBoxAdapter(
      child: Container(
        height: 200,
        color: Colors.green,
        child: Center(child: Text('Fixed Content')),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return ListTile(title: Text("Item $index"));
        },
        childCount: 20,
      ),
    ),
  ],
)
```

### 示例 3：使用 `SliverPersistentHeader`

```dart
CustomScrollView(
  slivers: <Widget>[
    SliverPersistentHeader(
      pinned: true,
      delegate: _MyHeaderDelegate(),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          return ListTile(title: Text("Item $index"));
        },
        childCount: 20,
      ),
    ),
  ],
)
```

然后定义 `_MyHeaderDelegate`：

```dart
class _MyHeaderDelegate extends SliverPersistentHeaderDelegate {
  @override
  Widget build(BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      color: Colors.blue,
      height: 100.0,
      child: Center(child: Text('Persistent Header')),
    );
  }

@override
  double get maxExtent => 100.0;

@override
  double get minExtent => 50.0;

@override
  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) {
    return false;
  }
}
```

---

## 四、为什么使用 `CustomScrollView` 和 `Slivers`？

- **灵活性高**：可以自由组合各种 sliver，实现复杂滚动效果。
- **性能优化**：只渲染当前可见的内容，适合长列表或动态数据。
- **兼容性好**：支持嵌套滚动、滑动同步等高级功能。
- **可扩展性强**：可以通过自定义 sliver 实现非常独特的 UI 效果。

---

## 五、常见问题

### Q: `CustomScrollView` 和 `ListView` 有什么区别？

- `ListView` 只能显示一个列表，不能混入其他类型的 widget。
- `CustomScrollView` 可以混入多个 sliver，如 `SliverAppBar`, `SliverGrid`, `SliverList` 等。

### Q: 如何让多个 sliver 同步滚动？

`CustomScrollView` 默认会将所有 sliver 放在一起滚动，但如果你希望某些 sliver 有独立的滚动行为（比如嵌套的 `ListView`），可以使用 `NestedScrollView`。

---

## 六、总结

| 特性 | CustomScrollView | ListView |
|------|------------------|----------|
| 支持多类型 sliver | ✅ | ❌ |
| 灵活性 | 非常高 | 一般 |
| 性能 | 优化 | 一般 |
| 使用场景 | 复杂滚动布局 | 简单列表展示 |

---

如果你正在开发一个需要高度定制滚动体验的应用（如新闻类、社交类应用），`CustomScrollView` 和 `Slivers` 是你必须掌握的工具。

需要我帮你写一个更复杂的例子吗？比如带有 `SliverAppBar` + `SliverGrid` + `SliverList` 的组合？