发布于 由admin

Parent Data 的妙用：RenderObject 间的数据传递与 Hit Test 拦截

Parent Data 的妙用：RenderObject 间的数据传递与 Hit Test 拦截

大家好！今天我们来深入探讨 Flutter 中一个相对冷门但功能强大的概念：Parent Data。它主要涉及两个方面：RenderObject 之间的数据传递以及 Hit Test 的拦截。理解并善用 Parent Data，可以帮助我们构建更灵活、更高效的自定义布局和交互组件。

1. 什么是 Parent Data？

在 Flutter 的渲染管道中，每个 Widget 最终都会对应到一个 RenderObject。RenderObject 负责计算自身的大小、布局子节点，并最终将内容绘制到屏幕上。Parent Data 扮演的角色是：允许父 RenderObject 向子 RenderObject 传递信息，从而影响子节点的布局和绘制行为。

简单来说，Parent Data 是父节点“额外”传递给子节点的信息，这些信息不是通过 Widget 的构造函数传递的，而是通过渲染树的父子关系传递的。 这种传递方式对于实现一些特殊的布局效果和交互行为非常有用。

2. ParentDataWidget 的作用

Parent Data 的传递依赖于 ParentDataWidget。 ParentDataWidget 是一个特殊的 Widget，它并不直接渲染任何内容，而是修改其子节点的 Parent Data。

ParentDataWidget 的核心作用如下：

  • 修改子 RenderObject 的 Parent Data: 通过继承 ParentDataWidget 并重写 applyParentData 方法，我们可以修改子 RenderObject 的 parentData 属性。
  • 触发重新布局: 当 ParentDataWidget 的配置发生变化时，Flutter 会触发其子树的重新布局，确保新的 Parent Data 被应用。

3. 自定义 ParentData 类

为了传递自定义数据，我们需要创建一个继承自 ParentData 的类。 这个类用于存储我们需要传递的信息。

class MyCustomParentData extends ParentDataWidget<MyCustomParentDataWidget> with ContainerParentDataMixin<RenderBox> {
  MyCustomParentData({
    this.alignment,
  });

  AlignmentGeometry? alignment;

  @override
  void applyParentData(RenderObject renderObject) {
    assert(renderObject.parentData is ContainerParentDataMixin<RenderBox>);
    final ContainerParentDataMixin<RenderBox> parentData =
        renderObject.parentData! as ContainerParentDataMixin<RenderBox>;
    bool needsLayout = false;

    if (parentData.alignment != alignment) {
      parentData.alignment = alignment;
      needsLayout = true;
    }

    if (needsLayout) {
      final AbstractNode? targetParent = renderObject.parent;
      if (targetParent is RenderObject) {
        targetParent.markNeedsLayout();
      }
    }
  }
}

在这个例子中，MyCustomParentData 继承自 ParentDataWidget，并包含一个 alignment 属性，用于存储对齐方式信息。 applyParentData 方法负责将 MyCustomParentDataWidget 的 alignment 值传递给子 RenderObject 的 parentData 属性。

ContainerParentDataMixin 是一个非常有用的mixin，它提供了常用的parentData字段，例如 offset 和 alignment。

4. 创建自定义 ParentDataWidget

现在，我们需要创建一个继承自 ParentDataWidget 的 Widget，用于将自定义的 Parent Data 应用到子节点上。

class MyCustomParentDataWidget extends ParentDataWidget<MyCustomParentDataWidget> {
  const MyCustomParentDataWidget({
    Key? key,
    required this.alignment,
    required Widget child,
  }) : super(key: key, child: child);

  final AlignmentGeometry alignment;

  @override
  void applyParentData(RenderObject renderObject) {
    if (renderObject.parentData is! ContainerParentDataMixin<RenderBox>) {
      return;
    }

    final parentData = renderObject.parentData! as ContainerParentDataMixin<RenderBox>;
    bool needsLayout = false;

    if (parentData.alignment != alignment) {
      parentData.alignment = alignment;
      needsLayout = true;
    }

    if (needsLayout) {
      final AbstractNode? targetParent = renderObject.parent;
      if (targetParent is RenderObject) {
        targetParent.markNeedsLayout();
      }
    }
  }

  @override
  Type get debugTypicalAncestorWidgetClass => MyCustomParentDataWidget;
}

MyCustomParentDataWidget 接受一个 alignment 参数和一个 child 参数。 在 applyParentData 方法中，它将 alignment 值设置到子 RenderObject 的 parentData 上。注意类型判断，如果parentData类型不对则直接返回。

5. 自定义 RenderObject，读取 Parent Data

接下来，我们需要创建一个自定义的 RenderObject，用于读取和使用 Parent Data。

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

class RenderMyCustomLayout extends RenderBox
    with
        ContainerRenderObjectMixin<RenderBox, ContainerParentDataMixin<RenderBox>>,
        RenderBoxContainerDefaultsMixin<RenderBox, ContainerParentDataMixin<RenderBox>> {
  RenderMyCustomLayout({List<RenderBox>? children}) {
    addAll(children);
  }

  @override
  void performLayout() {
    size = constraints.biggest; // 使用最大可用空间

    RenderBox? child = firstChild;
    while (child != null) {
      final ContainerParentDataMixin<RenderBox> childParentData =
          child.parentData! as ContainerParentDataMixin<RenderBox>;

      child.layout(constraints, parentUsesSize: true);

      final AlignmentGeometry? alignment = childParentData.alignment;

      Offset offset = Offset.zero;

      if (alignment != null) {
        final resolvedAlignment = alignment.resolve(TextDirection.ltr);
        offset = resolvedAlignment.alongSize(size - child.size as Size);
      }
      childParentData.offset = offset;
      child = childParentData.nextSibling;
    }
  }

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

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

在这个 RenderMyCustomLayout 中，我们重写了 performLayout 方法。 在这个方法中，我们遍历所有的子节点，并从它们的 parentData 中读取 alignment 值。 然后，我们根据 alignment 值计算子节点的位置，并将位置信息设置到子节点的 offset 属性中。这样就实现了根据 Parent Data 进行布局的效果。

6. 集成 ParentDataWidget 和 RenderObject

最后，我们需要将 MyCustomParentDataWidget 和 RenderMyCustomLayout 集成到一个 Widget 中。

class MyCustomLayout extends MultiChildRenderObjectWidget {
  MyCustomLayout({
    Key? key,
    required List<Widget> children,
  }) : super(key: key, children: children);

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

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

现在，我们可以使用 MyCustomLayout 和 MyCustomParentDataWidget 来创建一个自定义的布局。

MyCustomLayout(
  children: [
    MyCustomParentDataWidget(
      alignment: Alignment.topLeft,
      child: Container(width: 50, height: 50, color: Colors.red),
    ),
    MyCustomParentDataWidget(
      alignment: Alignment.bottomRight,
      child: Container(width: 50, height: 50, color: Colors.blue),
    ),
  ],
)

这段代码会将红色 Container 对齐到左上角，将蓝色 Container 对齐到右下角。

完整代码示例

为了方便大家理解，这里提供一个完整的代码示例：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Parent Data Demo'),
        ),
        body: Center(
          child: Container(
            width: 300,
            height: 300,
            color: Colors.grey[200],
            child: MyCustomLayout(
              children: [
                MyCustomParentDataWidget(
                  alignment: Alignment.topLeft,
                  child: Container(width: 50, height: 50, color: Colors.red),
                ),
                MyCustomParentDataWidget(
                  alignment: Alignment.bottomRight,
                  child: Container(width: 50, height: 50, color: Colors.blue),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class MyCustomParentData extends ParentDataWidget<MyCustomParentDataWidget> with ContainerParentDataMixin<RenderBox> {
  MyCustomParentData({
    this.alignment,
  });

  AlignmentGeometry? alignment;

  @override
  void applyParentData(RenderObject renderObject) {
    assert(renderObject.parentData is ContainerParentDataMixin<RenderBox>);
    final ContainerParentDataMixin<RenderBox> parentData =
        renderObject.parentData! as ContainerParentDataMixin<RenderBox>;
    bool needsLayout = false;

    if (parentData.alignment != alignment) {
      parentData.alignment = alignment;
      needsLayout = true;
    }

    if (needsLayout) {
      final AbstractNode? targetParent = renderObject.parent;
      if (targetParent is RenderObject) {
        targetParent.markNeedsLayout();
      }
    }
  }
}

class MyCustomParentDataWidget extends ParentDataWidget<MyCustomParentDataWidget> {
  const MyCustomParentDataWidget({
    Key? key,
    required this.alignment,
    required Widget child,
  }) : super(key: key, child: child);

  final AlignmentGeometry alignment;

  @override
  void applyParentData(RenderObject renderObject) {
    if (renderObject.parentData is! ContainerParentDataMixin<RenderBox>) {
      return;
    }

    final parentData = renderObject.parentData! as ContainerParentDataMixin<RenderBox>;
    bool needsLayout = false;

    if (parentData.alignment != alignment) {
      parentData.alignment = alignment;
      needsLayout = true;
    }

    if (needsLayout) {
      final AbstractNode? targetParent = renderObject.parent;
      if (targetParent is RenderObject) {
        targetParent.markNeedsLayout();
      }
    }
  }

  @override
  Type get debugTypicalAncestorWidgetClass => MyCustomParentDataWidget;
}

class MyCustomLayout extends MultiChildRenderObjectWidget {
  MyCustomLayout({
    Key? key,
    required List<Widget> children,
  }) : super(key: key, children: children);

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

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

class RenderMyCustomLayout extends RenderBox
    with
        ContainerRenderObjectMixin<RenderBox, ContainerParentDataMixin<RenderBox>>,
        RenderBoxContainerDefaultsMixin<RenderBox, ContainerParentDataMixin<RenderBox>> {
  RenderMyCustomLayout({List<RenderBox>? children}) {
    addAll(children);
  }

  @override
  void performLayout() {
    size = constraints.biggest; // 使用最大可用空间

    RenderBox? child = firstChild;
    while (child != null) {
      final ContainerParentDataMixin<RenderBox> childParentData =
          child.parentData! as ContainerParentDataMixin<RenderBox>;

      child.layout(constraints, parentUsesSize: true);

      final AlignmentGeometry? alignment = childParentData.alignment;

      Offset offset = Offset.zero;

      if (alignment != null) {
        final resolvedAlignment = alignment.resolve(TextDirection.ltr);
        offset = resolvedAlignment.alongSize(size - child.size as Size);
      }
      childParentData.offset = offset;
      child = childParentData.nextSibling;
    }
  }

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

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

7. Hit Test 拦截

Parent Data 的另一个重要应用是 Hit Test 拦截。 Hit Test 是 Flutter 确定哪个 Widget 接收用户交互事件（例如点击、触摸）的过程。

通过修改 Parent Data，我们可以控制 Hit Test 的行为，例如：

  • 阻止子节点接收事件: 可以设置 Parent Data，让父节点拦截所有传递给子节点的事件。
  • 修改事件目标: 可以修改 Parent Data，将事件传递给不同的子节点。

为了实现 Hit Test 拦截，我们需要在自定义的 RenderObject 中重写 hitTestChildren 方法。

@override
bool hitTestChildren(BoxHitTestResult result, {required Offset position}) {
  RenderBox? child = lastChild;
  while (child != null) {
    final ContainerParentDataMixin<RenderBox> childParentData =
        child.parentData! as ContainerParentDataMixin<RenderBox>;

    // 检查是否需要拦截 Hit Test
    if (childParentData is MyCustomParentData && childParentData.interceptHits == true) {
      // 如果需要拦截，则不进行 Hit Test，直接返回 false
      return false;
    }

    final bool isHit = result.addWithPaintOffset(
      offset: childParentData.offset,
      position: position,
      hitTest: (BoxHitTestResult result, Offset transformedPosition) {
        return child!.hitTest(result, position: transformedPosition);
      },
    );
    if (isHit) {
      return true;
    }
    child = childParentData.previousSibling;
  }
  return false;
}

在这个例子中，我们检查 childParentData 是否包含一个 interceptHits 属性。 如果该属性为 true，则我们不进行 Hit Test，直接返回 false，从而阻止子节点接收事件。

8. 应用场景

Parent Data 在很多场景下都非常有用，例如：

  • 自定义布局: 实现复杂的布局效果，例如瀑布流、堆叠布局等。
  • 动画效果: 基于 Parent Data 实现动画效果，例如子节点的淡入淡出、缩放等。
  • 自定义交互: 控制 Hit Test 行为，实现自定义的交互效果，例如拖拽排序、滑动删除等。
  • 图表组件: 在图表组件中，可以使用 Parent Data 将数据点的信息传递给子节点，从而实现自定义的图表样式。

9. ParentData 的优势与局限性

优势：

  • 解耦父子关系: Parent Data 允许父节点在不直接修改子节点 Widget 的情况下影响子节点的行为，从而实现父子节点之间的解耦。
  • 提高性能: 避免不必要的 Widget 重建，通过修改 Parent Data 可以触发 RenderObject 的重新布局，而无需重建整个 Widget 树。
  • 灵活性: 可以传递任意类型的数据，从而实现各种自定义的布局和交互效果。

局限性：

  • 学习曲线: Parent Data 的概念相对复杂，需要一定的学习成本。
  • 调试难度: 由于 Parent Data 的传递过程是隐式的，因此调试起来可能会比较困难。
  • 滥用风险: 过度使用 Parent Data 可能会导致代码难以理解和维护。

表格：Parent Data 相关类和方法

类/方法 描述
ParentData 所有 Parent Data 类的基类，用于存储父节点传递给子节点的信息。
ParentDataWidget 用于修改子节点 Parent Data 的 Widget。
applyParentData() ParentDataWidget 的方法，用于将 Parent Data 应用到子节点上。
RenderObject.parentData RenderObject 的属性，用于存储从父节点传递过来的 Parent Data。
RenderObject.markNeedsLayout() 标记 RenderObject 需要重新布局。当 Parent Data 发生变化时，需要调用此方法来触发重新布局。
RenderObject.hitTestChildren() 用于执行 Hit Test 的方法。 通过重写此方法，可以拦截或修改 Hit Test 的行为。
ContainerParentDataMixin 提供了通用的parentData属性如offset和alignment，方便使用

10. 总结ParentData的妙用

Parent Data 是 Flutter 渲染管道中一个强大的工具，它允许父 RenderObject 向子 RenderObject 传递信息，从而影响子节点的布局和绘制行为。通过自定义 ParentData 类和 ParentDataWidget，以及重写 RenderObject 的相关方法，我们可以实现各种自定义的布局和交互效果。 掌握 Parent Data 的使用方法，可以帮助我们构建更灵活、更高效的 Flutter 应用。

发表回复

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