BoxParentData 的扩展：在自定义 RenderObject 中存储子节点的布局元数据

大家好，今天我们来深入探讨 Flutter 中的 BoxParentData 以及如何在自定义 RenderObject 中利用它来存储子节点的布局元数据。BoxParentData 是 Flutter 布局系统中一个非常关键的组件，它允许父节点存储关于子节点的布局信息，从而实现复杂的布局逻辑。理解并熟练运用 BoxParentData 对于开发自定义的、高性能的布局组件至关重要。

1. BoxParentData 的基本概念

在 Flutter 的渲染树中，每个 RenderObject 代表一个可视化的组件。 RenderObject 负责计算自身的大小和位置，并将其子节点放置在正确的位置。 BoxParentData 正是连接父节点和子节点的桥梁，它允许父节点存储与特定子节点相关的布局信息。

BoxParentData 本身是一个非常简单的类，它通常包含以下信息：

offset: Offset 类型，表示子节点相对于父节点左上角的位置偏移量。

class BoxParentData extends ParentData {
  /// The offset of this child from the origin, in parent coordinates.
  Offset offset;

  @override
  String toString() => 'offset=$offset';
}

虽然 BoxParentData 看起来很简单，但它在布局过程中扮演着至关重要的角色。例如，在 Stack 组件中，每个子节点都拥有一个 StackParentData，该类继承自 BoxParentData，并添加了 alignment 和 fit 等属性，允许 Stack 组件根据这些属性来定位和调整子节点的大小。

2. 为什么需要扩展 BoxParentData？

Flutter 提供的标准布局组件（如 Row、Column、Stack 等）已经能够满足大部分的布局需求。然而，在某些情况下，我们需要创建自定义的布局组件来实现特定的视觉效果或优化性能。在这些情况下，扩展 BoxParentData 可以帮助我们：

存储自定义的布局信息：我们可以添加额外的属性来存储与布局相关的任何自定义数据，例如子节点的大小、权重、对齐方式等。
简化布局逻辑：通过将布局信息存储在 BoxParentData 中，父节点可以轻松地访问和修改这些信息，从而简化布局算法的实现。
提高布局性能：避免在布局过程中重复计算相同的数据。将计算结果存储在 BoxParentData 中可以提高布局性能，尤其是在处理大量子节点时。
实现复杂的布局行为：扩展 BoxParentData 可以让我们实现一些标准的布局组件无法实现的复杂布局行为。

3. 如何扩展 BoxParentData

扩展 BoxParentData 非常简单。我们只需要创建一个新的类，并继承自 BoxParentData。然后，我们可以添加任何我们需要的属性。

例如，假设我们要创建一个自定义的布局组件，该组件允许我们为每个子节点指定一个权重值。我们可以创建一个名为 WeightedParentData 的类，如下所示：

import 'package:flutter/rendering.dart';

class WeightedParentData extends BoxParentData {
  double weight;

  @override
  String toString() => '${super.toString()}, weight=$weight';
}

在这个例子中，我们添加了一个 weight 属性，用于存储子节点的权重值。我们还覆盖了 toString 方法，以便在调试时可以方便地查看 WeightedParentData 的内容。

4. 在自定义 RenderObject 中使用扩展的 BoxParentData

现在，我们已经创建了一个扩展的 BoxParentData 类。接下来，我们需要创建一个自定义的 RenderObject 来使用它。

首先，我们需要创建一个新的 RenderObject 类，并继承自 RenderBox。在这个类中，我们需要：

重写 setupParentData 方法，以便将我们的 WeightedParentData 附加到每个子节点。
重写 performLayout 方法，以便根据 WeightedParentData 中的 weight 属性来布局子节点。
重写 paint 方法，以便绘制子节点。

下面是一个简单的例子：

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

class RenderWeightedColumn extends RenderBox
    with
        ContainerRenderObjectMixin<RenderBox, WeightedParentData>,
        RenderBoxContainerDefaultsMixin<RenderBox, WeightedParentData> {
  @override
  void setupParentData(RenderBox child) {
    if (child.parentData is! WeightedParentData) {
      child.parentData = WeightedParentData();
    }
  }

  @override
  void performLayout() {
    double totalWeight = 0.0;
    double totalHeight = 0.0;
    RenderBox child = firstChild;

    // Calculate the total weight and the total height of non-weighted children.
    while (child != null) {
      final WeightedParentData childParentData =
          child.parentData as WeightedParentData;
      if (childParentData.weight == null || childParentData.weight <= 0) {
        child.layout(constraints.loosen(), parentUsesSize: true);
        totalHeight += child.size.height;
      } else {
        totalWeight += childParentData.weight;
      }
      child = childParentData.nextSibling;
    }

    // Calculate the remaining height and the height per weight.
    final double remainingHeight = constraints.maxHeight - totalHeight;
    final double heightPerWeight = remainingHeight / totalWeight;

    // Layout the weighted children.
    child = firstChild;
    double currentY = 0.0;
    while (child != null) {
      final WeightedParentData childParentData =
          child.parentData as WeightedParentData;

      double childHeight;
      if (childParentData.weight == null || childParentData.weight <= 0) {
        childHeight = child.size.height;
      } else {
        childHeight = heightPerWeight * childParentData.weight;
        child.layout(constraints.copyWith(minHeight: childHeight, maxHeight: childHeight), parentUsesSize: true);
      }

      childParentData.offset = Offset(0.0, currentY);
      currentY += childHeight;

      child = childParentData.nextSibling;
    }

    size = Size(constraints.maxWidth, currentY);
  }

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

在这个例子中，我们：

继承了 ContainerRenderObjectMixin，以便我们可以管理子节点。
重写了 setupParentData 方法，以便将 WeightedParentData 附加到每个子节点。如果子节点没有 WeightedParentData，则创建一个新的 WeightedParentData 对象并将其附加到子节点。
重写了 performLayout 方法，以便根据 WeightedParentData 中的 weight 属性来布局子节点。
- 首先，计算所有子节点的总权重和非权重子节点的高度总和。
- 然后，计算剩余高度以及每个权重的对应高度。
- 最后，遍历所有子节点，根据其权重值计算其高度，并将其放置在正确的位置。
重写了 paint 方法，以便绘制子节点。

5. 创建自定义 Widget 使用 RenderWeightedColumn

现在我们已经创建了 RenderWeightedColumn，我们需要创建一个 Widget 来使用它。

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

class WeightedColumn extends MultiChildRenderObjectWidget {
  WeightedColumn({
    Key key,
    List<Widget> children = const <Widget>[],
  }) : super(key: key, children: children);

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

  @override
  void updateRenderObject(BuildContext context, RenderWeightedColumn renderObject) {
    // No need to update anything in this simple example.
  }

  static double getWeight(BuildContext context) {
    final WeightedParentData weighted = context.findAncestorRenderObjectOfType<RenderBox>().parentData as WeightedParentData;
    return weighted?.weight;
  }

  static void setWeight(BuildContext context, double weight) {
    final WeightedParentData weighted = context.findAncestorRenderObjectOfType<RenderBox>().parentData as WeightedParentData;
    weighted.weight = weight;
    final RenderObject renderObject = context.findAncestorRenderObjectOfType<RenderObject>();
    renderObject.markNeedsLayout();
  }
}

class Weighted extends StatelessWidget {
  const Weighted({
    Key key,
    @required this.weight,
    @required this.child,
  }) : super(key: key);

  final double weight;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return _Weighted(weight: weight, child: child);
  }
}

class _Weighted extends ParentDataWidget<WeightedParentData> {
  const _Weighted({
    Key key,
    @required this.weight,
    @required this.child,
  }) : super(key: key, child: child);

  final double weight;

  @override
  void applyParentData(RenderObject renderObject) {
    final WeightedParentData parentData = renderObject.parentData as WeightedParentData;
    if (parentData.weight != weight) {
      parentData.weight = weight;
      final AbstractNode targetParent = renderObject.parent;
      if (targetParent is RenderObject)
        targetParent.markNeedsLayout();
    }
  }

  @override
  Type get debugTypicalAncestorWidgetClass => WeightedColumn;
}

在这个例子中，我们：

继承了 MultiChildRenderObjectWidget，以便我们可以管理多个子节点。
重写了 createRenderObject 方法，以便创建 RenderWeightedColumn 对象。
提供 getWeight 和 setWeight 静态方法，以便获取和设置子节点的权重。实际上更好的做法是通过 ParentDataWidget 来传递数据。
创建了 Weighted widget，使用 ParentDataWidget 来传递权重。

6. 使用示例

现在，我们可以使用 WeightedColumn 组件来创建一个简单的布局。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Weighted Column Example'),
        ),
        body: Container(
          height: 300,
          color: Colors.grey[200],
          child: WeightedColumn(
            children: <Widget>[
              Weighted(
                weight: 1.0,
                child: Container(
                  color: Colors.red,
                  child: Center(
                    child: Text('Weight: 1.0', style: TextStyle(color: Colors.white)),
                  ),
                ),
              ),
              Container(
                color: Colors.green,
                child: Center(
                  child: Text('No Weight', style: TextStyle(color: Colors.white)),
                ),
              ),
              Weighted(
                weight: 2.0,
                child: Container(
                  color: Colors.blue,
                  child: Center(
                    child: Text('Weight: 2.0', style: TextStyle(color: Colors.white)),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个例子中，我们创建了一个 WeightedColumn 组件，并添加了三个子节点。第一个子节点的权重为 1.0，第二个子节点没有权重，第三个子节点的权重为 2.0。 WeightedColumn 组件会根据这些权重值来分配子节点的高度。

7. ParentDataWidget 的使用

在上面的例子中，我们使用 ParentDataWidget (_Weighted) 将权重信息传递给 RenderWeightedColumn。 ParentDataWidget 是一个非常有用的工具，它可以让我们在 Widget 树中向上层 RenderObject 传递数据。

ParentDataWidget 的工作原理如下：

当 Flutter 构建 Widget 树时，它会调用 ParentDataWidget 的 applyParentData 方法。
在 applyParentData 方法中，我们可以访问到子节点的 RenderObject 和其 parentData。
我们可以修改 parentData 中的属性，以便将数据传递给父节点。
父节点可以在布局过程中访问这些数据，并根据这些数据来布局子节点。

使用 ParentDataWidget 的好处是：

解耦：子节点不需要知道父节点的具体实现细节。它只需要知道如何修改 parentData 中的属性。
灵活性：我们可以随时修改 ParentDataWidget 中的属性，而不需要修改父节点的代码。
可重用性：我们可以将 ParentDataWidget 应用于不同的父节点，而不需要为每个父节点编写不同的代码。

8. 总结

这篇文章详细介绍了 BoxParentData 的概念、扩展方法以及在自定义 RenderObject 中如何使用扩展的 BoxParentData。通过扩展 BoxParentData，我们可以存储自定义的布局信息，简化布局逻辑，提高布局性能，并实现复杂的布局行为。 ParentDataWidget 是一种非常有用的工具，可以让我们在 Widget 树中向上层 RenderObject 传递数据，实现解耦、灵活性和可重用性。掌握这些技术对于开发自定义的高性能布局组件至关重要。

9. 更进一步的思考

BoxParentData 的扩展为自定义布局提供了强大的能力。除了权重之外，我们还可以存储其他各种布局相关的信息，例如：

属性	描述
`alignment`	子节点在父节点中的对齐方式。
`margin`	子节点的外边距。
`padding`	子节点的内边距。
`flex`	子节点的弹性系数，用于在可用空间中分配子节点的大小。
`order`	子节点的排序顺序，用于控制子节点的绘制顺序。
`crossAxisAlignment`	控制子节点在交叉轴上的对齐方式，例如在 `Row` 中，交叉轴是垂直方向。

通过灵活运用这些属性，我们可以创建各种各样复杂的自定义布局组件，满足不同的需求。此外，我们还可以结合 CustomPainter 来实现更高级的视觉效果。

10. 关键点回顾

BoxParentData 允许父节点存储关于子节点的布局信息。
扩展 BoxParentData 可以存储自定义的布局信息，简化布局逻辑，提高布局性能。
ParentDataWidget 可以将数据从子节点传递到父节点的 RenderObject。
结合 BoxParentData 的扩展和 ParentDataWidget 可以创建自定义的高性能布局组件。

BoxParentData 的扩展：在自定义 RenderObject 中存储子节点的布局元数据

发表回复 取消回复

发表回复取消回复