Flutter 完整开发实战详解自定义布局，移动开发框架2019

最新推荐文章于 2025-04-09 16:04:31 发布

m0_64604311

最新推荐文章于 2025-04-09 16:04:31 发布

阅读量1.2k

点赞数 1

分类专栏：程序员文章标签：面试移动开发 android

本文链接：https://blog.youkuaiyun.com/m0_64604311/article/details/121767025

版权

本文详细介绍了Flutter中自定义布局的实现过程，包括关键类如MultiChildRenderObjectWidget、MultiChildRenderObjectElement以及ContainerBoxParentData的作用。通过一个自定义的RenderCloudWidget示例，展示了如何设置child的大小和位置，实现特定布局效果。此外，还提到了CustomMultiChildLayout作为简化自定义布局的选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/// 计算返回第一个 child 的基线，常用于 child 的位置顺序有关

double defaultComputeDistanceToFirstActualBaseline(TextBaseline baseline)

/// 计算返回所有 child 中最小的基线，常用于 child 的位置顺序无关

double defaultComputeDistanceToHighestActualBaseline(TextBaseline baseline)

/// 触摸碰撞测试

bool defaultHitTestChildren(BoxHitTestResult result, { Offset position })

/// 默认绘制

void defaultPaint(PaintingContext context, Offset offset)

/// 以数组方式返回 child 链表

List getChildrenAsList()

3、ContainerBoxParentData

ContainerBoxParentData 是 BoxParentData 的子类，主要是关联了 ContainerDefaultsMixin 和 BoxParentData ，BoxParentData 是 RenderBox 绘制时所需的位置类。

通过 ContainerBoxParentData ，我们可以将 RenderBox 需要的 BoxParentData 和上面的 ContainerParentDataMixin 组合起来，事实上我们得到的 children 双链表就是以 ParentData 的形式呈现出来的。

abstract class ContainerBoxParentData extends BoxParentData with ContainerParentDataMixin { }

4、MultiChildRenderObjectWidget

MultiChildRenderObjectWidget 的实现很简单，它仅仅只是继承了 RenderObjectWidget，然后提供了 children 数组，并创建了 MultiChildRenderObjectElement。

上面的 RenderObjectWidget 顾名思义，它是提供 RenderObject 的 Widget ，那有不存在 RenderObject 的 Widget 吗？

有的，比如我们常见的 StatefulWidget 、 StatelessWidget 、 Container 等，它们的 Element 都是 ComponentElement ， ComponentElement 仅仅起到容器的作用，而它的 get renderObject 需要来自它的 child 。

5、MultiChildRenderObjectElement

前面的篇章我们说过 Element 是 BuildContext 的实现，内部一般持有 Widget 、RenderObject 并作为二者沟通的桥梁，那么 MultiChildRenderObjectElement 就是我们自定义布局时的桥梁了，如下代码所示，MultiChildRenderObjectElement 主要实现了如下接口，其主要功能是对内部 children 的 RenderObject ，实现了插入、移除、访问、更新等逻辑：

/// 下面三个方法都是利用 ContainerRenderObjectMixin 的 in