Flutter 嵌套可滚动组件 NestedScrollView

封面图 • 2025-11-03 • Flutter

在 Flutter 中，`NestedScrollView` 是一个非常强大的组件，用于处理**嵌套的可滚动组件**。它通常用于实现类似 Material Design 中“Sliver”布局的复杂滚动效果，比如：

- 顶部是一个 `AppBar`（带有 `FlexibleSpaceBar`）
- 中间是 `ListView` 或其他可滚动内容
- 底部是 `TabBarView` 或其他可滚动区域

### ✅ 基本结构

`NestedScrollView` 的核心思想是：**将多个可滚动组件嵌套在一个可滚动容器中**，并允许它们协同工作。

```dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: NestedScrollView(
          headerSlivers: <Widget>[
            // 头部滑动部分，如 AppBar
            const SliverAppBar(
              title: Text('NestedScrollView 示例'),
              floating: false,
              pinned: true,
              expandedHeight: 200.0,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('标题'),
              ),
            ),
          ],
          body: ListView.builder(
            itemCount: 50,
            itemBuilder: (context, index) {
              return ListTile(title: Text('Item $index'));
            },
          ),
        ),
      ),
    );
  }
}
```

---

## 📌 关键概念

### 1. **SliverAppBar**
- 可以设置 `pinned` 和 `floating` 属性。
- 当 `pinned: true` 时，AppBar 会固定在顶部。
- `expandedHeight` 控制展开时的高度。

### 2. **headerSlivers**
- 这是一个 `List<Widget>`，用来放置滑动的头部组件，如 `SliverAppBar`、`SliverList` 等。
- 它们会随着内容滚动而移动。

### 3. **body**
- 是一个可滚动的组件，通常是 `ListView`、`CustomScrollView` 等。
- 注意：不能直接使用 `SingleChildScrollView`，否则会导致滚动冲突。

---

## 🧠 使用场景

| 场景 | 说明 |
|------|------|
| 顶部有 `AppBar`，中间有 `ListView` | 常见的新闻类 App 布局 |
| 顶部有 `AppBar`，中间有 `TabBarView` | 类似 Google 新闻的布局 |
| 多个可滚动区域嵌套 | 比如 `SliverList` + `ListView` |

---

## 🔁 嵌套多个可滚动组件示例

如果你想要在 `NestedScrollView` 中嵌套多个可滚动组件，可以这样做：

```dart
body: CustomScrollView(
  slivers: <Widget>[
    SliverList(
      delegate: SliverChildListDelegate([
        ListTile(title: Text('Section 1')),
        ListTile(title: Text('Item 1')),
        ListTile(title: Text('Item 2')),
      ]),
    ),
    SliverPadding(
      padding: EdgeInsets.all(16),
      sliver: SliverList(
        delegate: SliverChildListDelegate([
          ListTile(title: Text('Section 2')),
          ListTile(title: Text('Item A')),
          ListTile(title: Text('Item B')),
        ]),
      ),
    ),
  ],
),
```

> 注意：`body` 需要是一个 `ScrollView`（如 `CustomScrollView`），不能直接放 `ListView`。

---

## ⚠️ 常见问题

### ❌ 错误：`Cannot scroll to a position in a scrollable that is not a scrollable`

原因：你可能在 `body` 中用了 `ListView` 而没有用 `CustomScrollView`。

✅ 正确写法：

```dart
body: CustomScrollView(
  slivers: [
    // ... your slivers here
  ],
)
```

---

## ✅ 总结

| 组件 | 用途 |
|------|------|
| `NestedScrollView` | 嵌套多个可滚动组件 |
| `SliverAppBar` | 可滑动的 AppBar |
| `CustomScrollView` | 自定义滚动布局 |
| `SliverList` / `SliverGrid` | 滑动列表或网格 |

---

如果你有具体的应用场景（比如想实现一个带 TabBar 的 NestedScrollView），我可以帮你写出完整代码 😊