Flutter 自定义 Sliver

封面图 • 2025-11-03 • Flutter

在 Flutter 中，`Sliver` 是用于构建 **可滚动列表**（如 `CustomScrollView`）的组件。Flutter 提供了多种内置的 `Sliver`，比如 `SliverList`、`SliverGrid`、`SliverAppBar` 等。但如果你需要更灵活地控制布局或实现自定义的滚动行为，你可以通过继承 `Sliver` 类来创建**自定义 Sliver**。

---

## ✅ 一、为什么需要自定义 Sliver？

- 需要高度定制的布局
- 实现特定的滚动行为（如固定头部、动态加载等）
- 避免使用 `ListView` 或 `GridView` 的限制

---

## ✅ 二、如何创建一个自定义 Sliver？

### 1. 继承 `RenderSliver` 类

你需要创建一个自定义的 `RenderObject`，并让它继承自 `RenderSliver`。

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

class CustomSliver extends RenderSliver {
  CustomSliver({required this.child}) : super(child: child);

final RenderBox child;

@override
  void performLayout() {
    // 在这里进行布局逻辑
    // 例如设置 child 的尺寸和位置
    final double availableHeight = constraints.remainingPaintExtent;
    child.layout(
      BoxConstraints.tightFor(height: availableHeight),
      parentUsesSize: true,
    );
    size = Size(constraints.crossAxisExtent, availableHeight);
  }

@override
  void paint(PaintingContext context, Offset offset) {
    // 在这里绘制子组件
    context.paintChild(child, offset);
  }
}
```

> 注意：这只是一个非常基础的示例，实际中可能需要处理更多细节，比如滚动方向、子组件的排列方式等。

---

### 2. 创建 `Sliver` widget

然后，创建一个 `StatefulWidget` 来包装你的自定义 `RenderSliver`：

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

class CustomSliverWidget extends SingleChildRenderObjectWidget {
  const CustomSliverWidget({Key? key, required Widget child}) : super(key: key, child: child);

@override
  RenderSliver createRenderObject(BuildContext context) {
    return CustomSliver(child: child);
  }

@override
  void updateRenderObject(BuildContext context, RenderSliver renderObject) {
    renderObject.child = child;
  }
}
```

---

### 3. 使用自定义 Sliver

你可以在 `CustomScrollView` 中使用它：

```dart
CustomScrollView(
  slivers: [
    CustomSliverWidget(
      child: Container(
        color: Colors.blue,
        height: 200,
        child: Center(child: Text('Custom Sliver')),
      ),
    ),
    SliverList(
      delegate: SliverChildBuilderDelegate((context, index) {
        return ListTile(title: Text('Item $index'));
      }, childCount: 20),
    ),
  ],
)
```

---

## ✅ 三、高级用法（进阶）

### 1. 处理滚动方向

你可以根据 `constraints.axisDirection` 来判断是垂直还是水平滚动，并据此调整布局逻辑。

### 2. 使用 `SliverMultiBoxAdaptor` 或 `SliverChildBuilderDelegate`

如果你希望像 `SliverList` 或 `SliverGrid` 一样支持动态生成多个子项，可以参考 `SliverMultiBoxAdaptor` 的实现方式。

### 3. 自定义滚动行为

你可以通过重写 `hitTestChildren` 方法来自定义点击事件的处理逻辑。

---

## ✅ 四、推荐学习资源

- [Flutter 官方文档 - Sliver](https://api.flutter.dev/flutter/widgets/Sliver-class.html)
- [Flutter 的 Sliver 系列文章](https://medium.com/@tobias.burkner/flutter-silver-widgets-the-missing-guide-7b4f8e96c5d9)
- [Flutter Sliver 源码分析](https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/widgets/sliver.dart)

---

## ✅ 五、总结

| 步骤 | 内容 |
|------|------|
| 1 | 继承 `RenderSliver` 实现自定义布局 |
| 2 | 创建 `SingleChildRenderObjectWidget` 包装 `RenderSliver` |
| 3 | 在 `CustomScrollView` 中使用自定义 Sliver |

如果你有具体的需求（比如：实现一个瀑布流、悬浮标题、无限滚动等），可以告诉我，我可以帮你写出更具体的代码。

是否需要我给你一个完整的自定义 Sliver 示例？比如一个“悬浮标题 + 列表”的效果？