发布于 由admin

RenderBox 与 RenderSliver 的混合使用：Adapter 模式在滚动视窗中的实现

RenderBox 与 RenderSliver 的混合使用：Adapter 模式在滚动视窗中的实现

大家好，今天我们来探讨一个在Flutter中构建复杂滚动视图时经常遇到的问题：如何有效地混合使用 RenderBox 和 RenderSliver。特别是当我们希望将一些传统的 RenderBox 组件嵌入到滚动视窗中时，我们需要一种机制来实现这种混合。而 Adapter 模式 在这里可以发挥关键作用。

1. 问题背景：RenderBox 与 RenderSliver 的差异

在Flutter中，布局模型主要有两种：

  • RenderBox: 这是最常见的布局基类，用于构建非滚动区域的UI元素。RenderBox 对象通常具有固定的尺寸，并且可以放置在父 RenderBox 的特定位置。

  • RenderSliver: 专门用于滚动视窗中的布局。RenderSliver 对象不直接控制自身的大小和位置，而是根据滚动视窗的约束条件来确定其尺寸和偏移量。它们负责在滚动视窗中渲染一部分内容，并通知滚动视窗它们占用了多少空间。

简单来说，RenderBox 是用于静态布局，而 RenderSliver 是用于动态滚动布局。

当我们尝试将一个现有的 RenderBox 组件直接添加到 CustomScrollView 或其他基于 Sliver 的滚动视窗中时，就会遇到问题。因为滚动视窗期望的是 RenderSliver，而不是 RenderBox。

2. Adapter 模式：桥接 RenderBox 和 RenderSliver

为了解决这个问题，我们可以使用 Adapter 模式。Adapter 模式允许我们将一个类的接口转换成客户希望的另一个接口。在这里，我们需要创建一个 Adapter，将 RenderBox 适配成 RenderSliver。

具体来说，我们需要创建一个 RenderSliver 的子类，该子类内部包含一个 RenderBox 对象。这个 RenderSliver 将负责测量和布局内部的 RenderBox，并将其渲染到滚动视窗中。

3. 实现 RenderSliverBoxAdapter

下面是一个 RenderSliverBoxAdapter 的实现示例：

import 'package:flutter/rendering.dart';

class RenderSliverBoxAdapter extends RenderSliverSingleBoxAdapter {
  RenderSliverBoxAdapter({RenderBox? child}) : super(child: child);

  @override
  void performLayout(SliverConstraints constraints) {
    if (child == null) {
      geometry = SliverGeometry.zero;
      return;
    }

    // 1. 测量 RenderBox
    child!.layout(constraints.asBoxConstraints(), parentUsesSize: true);

    // 2. 计算 SliverGeometry
    final double childExtent = child!.size.height; // 假设是垂直滚动
    geometry = SliverGeometry(
      scrollExtent: childExtent,
      paintExtent: calculatePaintOffset(constraints, from: 0.0, to: childExtent),
      maxPaintExtent: childExtent,
      hasVisualOverflow: childExtent > constraints.remainingPaintExtent || constraints.scrollOffset > 0.0,
    );

    // 3. 设置 child 的偏移量
    child!.offset = Offset(constraints.axisDirection == AxisDirection.left || constraints.axisDirection == AxisDirection.right ? constraints.overlap : 0.0, constraints.axisDirection == AxisDirection.up || constraints.axisDirection == AxisDirection.down ? constraints.overlap : 0.0);
  }
}

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

  @override
  RenderObject createRenderObject(BuildContext context) {
    return RenderSliverBoxAdapter();
  }
}

代码解释：

  • RenderSliverBoxAdapter 继承自 RenderSliverSingleBoxAdapter，这是一个方便的基类，用于只有一个子 RenderBox 的 RenderSliver。

  • performLayout 方法是核心。它接收 SliverConstraints 对象，该对象包含了滚动视窗的约束条件。

    • 测量 RenderBox: 我们使用 child!.layout(constraints.asBoxConstraints(), parentUsesSize: true) 来测量内部的 RenderBox。constraints.asBoxConstraints() 将 Sliver 约束转换为 Box 约束，以便 RenderBox 可以进行布局。parentUsesSize: true 告诉 RenderBox，父组件（即 RenderSliverBoxAdapter）会使用其计算的大小。

    • 计算 SliverGeometry: SliverGeometry 描述了 Sliver 在滚动视窗中的几何属性，包括滚动范围、绘制范围、最大绘制范围等。我们根据 RenderBox 的尺寸来计算 SliverGeometry。这里假设是垂直滚动，所以我们使用 child!.size.height 作为滚动范围。

    • 设置 child 的偏移量: 我们需要设置 child 的 offset 属性，以便它在滚动视窗中正确地渲染。这里简单地将偏移量设置为 constraints.overlap，这通常用于处理 Sliver 的重叠部分。

  • SliverBoxAdapter 是一个 Widget，用于创建 RenderSliverBoxAdapter 对象。它继承自 SingleChildRenderObjectWidget，这是一个方便的基类，用于创建只有一个子 Widget 的 RenderObjectWidget。

4. 使用 RenderSliverBoxAdapter

现在我们可以使用 RenderSliverBoxAdapter 将任何 RenderBox 组件嵌入到 CustomScrollView 中：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              title: Text('CustomScrollView Example'),
              floating: true,
            ),
            SliverBoxAdapter( // 使用 RenderSliverBoxAdapter
              child: Container(
                height: 200.0,
                color: Colors.red,
                child: Center(
                  child: Text(
                    'This is a RenderBox in a Sliver!',
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return Container(
                    height: 50.0,
                    color: index.isEven ? Colors.green : Colors.blue,
                    child: Center(
                      child: Text('Item $index'),
                    ),
                  );
                },
                childCount: 20,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个例子中，我们使用 SliverBoxAdapter 将一个 Container (一个 RenderBox) 嵌入到 CustomScrollView 中。

5. 扩展：处理更复杂的 RenderBox

上面的例子很简单，只处理了一个简单的 Container。但是，如果我们需要处理更复杂的 RenderBox，例如包含多个子元素的自定义 RenderBox，我们需要在 RenderSliverBoxAdapter 中进行更精细的布局控制。

例如，假设我们有一个自定义的 RenderBox，它将子元素排列成一个水平列表。我们可以创建一个 RenderSliverBoxAdapter 来适配它：

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

class HorizontalListRenderBox extends RenderBox
    with
        ContainerRenderObjectMixin<RenderBox, ContainerParentData<RenderBox>>,
        RenderBoxContainerDefaultsMixin<RenderBox, ContainerParentData<RenderBox>> {

  HorizontalListRenderBox({List<RenderBox>? children}) {
    addAll(children);
  }

  @override
  void setupParentData(RenderBox child) {
    if (child.parentData is! ContainerParentData<RenderBox>) {
      child.parentData = ContainerParentData<RenderBox>();
    }
  }

  @override
  Size computeDryLayout(BoxConstraints constraints) {
    double width = 0;
    double height = 0;
    RenderBox? child = firstChild;
    while (child != null) {
      child.layout(constraints.loosen(), parentUsesSize: true);
      final ContainerParentData childParentData = child.parentData! as ContainerParentData;
      width += child.size.width;
      height = math.max(height, child.size.height);
      child = childParentData.nextSibling;
    }
    return constraints.constrain(Size(width, height));
  }

  @override
  void performLayout() {
    double width = 0;
    double height = 0;
    RenderBox? child = firstChild;
    while (child != null) {
      child.layout(constraints.loosen(), parentUsesSize: true);
      final ContainerParentData childParentData = child.parentData! as ContainerParentData;
      childParentData.offset = Offset(width, 0);
      width += child.size.width;
      height = math.max(height, child.size.height);
      child = childParentData.nextSibling;
    }
    size = constraints.constrain(Size(width, height));
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    defaultPaint(context, offset);
  }

  @override
  bool hitTestChildren(BoxHitTestResult result, { required Offset position }) {
    return defaultHitTestChildren(result, position: position);
  }
}

class RenderSliverHorizontalListAdapter extends RenderSliverSingleBoxAdapter {
  RenderSliverHorizontalListAdapter({required HorizontalListRenderBox child}) : super(child: child);

  @override
  void performLayout(SliverConstraints constraints) {
    if (child == null) {
      geometry = SliverGeometry.zero;
      return;
    }

    // 1. 测量 RenderBox
    child!.layout(constraints.asBoxConstraints(), parentUsesSize: true);

    // 2. 计算 SliverGeometry
    final double childExtent = child!.size.height; // 假设是垂直滚动
    geometry = SliverGeometry(
      scrollExtent: childExtent,
      paintExtent: calculatePaintOffset(constraints, from: 0.0, to: childExtent),
      maxPaintExtent: childExtent,
      hasVisualOverflow: childExtent > constraints.remainingPaintExtent || constraints.scrollOffset > 0.0,
    );

    // 3. 设置 child 的偏移量
    child!.offset = Offset(constraints.axisDirection == AxisDirection.left || constraints.axisDirection == AxisDirection.right ? constraints.overlap : 0.0, constraints.axisDirection == AxisDirection.up || constraints.axisDirection == AxisDirection.down ? constraints.overlap : 0.0);
  }
}

class SliverHorizontalListAdapter extends SingleChildRenderObjectWidget {
  const SliverHorizontalListAdapter({Key? key, required this.children}) : super(key: key, child: null);

  final List<Widget> children;

  @override
  RenderObject createRenderObject(BuildContext context) {
    return RenderSliverHorizontalListAdapter(child: HorizontalListRenderBox(children: children.map<RenderBox>((Widget w) => w.createRenderObject(context) as RenderBox).toList()));
  }

  @override
  void updateRenderObject(BuildContext context, RenderSliverHorizontalListAdapter renderObject) {
    final horizontalListRenderBox = renderObject.child as HorizontalListRenderBox;
    horizontalListRenderBox.removeAll();
    horizontalListRenderBox.addAll(children.map<RenderBox>((Widget w) => w.createRenderObject(context) as RenderBox).toList());
    horizontalListRenderBox.markNeedsLayout();
  }
}

在这个例子中，HorizontalListRenderBox 是一个自定义的 RenderBox，它将子元素排列成一个水平列表。RenderSliverHorizontalListAdapter 负责测量和布局 HorizontalListRenderBox，并将其渲染到滚动视窗中。注意updateRenderObject的实现，确保children变化的时候，可以更新对应的RenderObject。

6. Adapter 模式的优点

使用 Adapter 模式有以下优点：

  • 解耦: RenderBox 和 RenderSliver 之间的依赖关系被解耦。RenderBox 不需要知道它将被放置在滚动视窗中。
  • 复用: 现有的 RenderBox 组件可以很容易地被复用到滚动视窗中，而无需修改其代码。
  • 灵活性: 我们可以根据需要创建不同的 Adapter，以适应不同的 RenderBox 组件。

7. 其他考虑因素

  • 性能: 在某些情况下，将 RenderBox 适配成 RenderSliver 可能会导致性能问题。例如，如果 RenderBox 的布局非常复杂，那么每次滚动时都需要重新布局，这可能会影响滚动性能。在这种情况下，可以考虑使用其他方法来优化性能，例如缓存布局结果或使用 RenderSliver 直接实现布局。

  • 交互: 如果 RenderBox 组件需要处理用户交互，例如点击事件，我们需要确保这些交互在滚动视窗中仍然有效。这可能需要在 RenderSliverBoxAdapter 中进行一些额外的处理。

8. 替代方案

除了 Adapter 模式，还有其他一些方法可以将 RenderBox 组件嵌入到滚动视窗中：

  • 使用 SliverToBoxAdapter: Flutter 提供了一个内置的 SliverToBoxAdapter 组件，它可以将一个 Widget (实际上是一个 RenderBox) 转换成一个 Sliver。SliverToBoxAdapter 本质上也是一个 Adapter，但它更简单，只适用于简单的 RenderBox。在上面的例子中，SliverBoxAdapter 可以直接使用 SliverToBoxAdapter实现。

  • 直接使用 CustomPainter: 如果 RenderBox 组件只是用于绘制一些简单的图形，我们可以直接使用 CustomPainter 来实现绘制，而无需创建 RenderBox。

9. 表格总结

特性 RenderBox RenderSliver
用途 非滚动区域的静态布局 滚动视窗中的动态布局
尺寸和位置 由父组件决定，通常是固定的 由滚动视窗的约束条件决定，动态变化
布局方式 基于 Box 约束 基于 Sliver 约束
适用场景 静态 UI 元素，例如按钮、文本框等 滚动列表、网格等
与滚动视窗的集成 需要使用 Adapter 模式（例如 RenderSliverBoxAdapter） 直接集成到 CustomScrollView 等滚动视窗中

10. 总结：巧妙利用Adapter，实现RenderBox与RenderSliver的无缝衔接

总的来说，当我们需要将 RenderBox 组件嵌入到滚动视窗中时，Adapter 模式是一个非常有用的工具。通过创建一个 RenderSliverBoxAdapter，我们可以将 RenderBox 适配成 RenderSliver，从而实现 RenderBox 和 RenderSliver 的混合使用。在实际应用中，我们需要根据具体的场景选择合适的 Adapter 实现，并考虑性能和交互等因素。理解RenderObject的生命周期和布局约束，将有助于我们更好的使用Adapter模式。

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注