猫哥说
这是自定义组件的第二篇, 第一篇点这里
有的时候我们需要做些很基础的组件或者工具，我们需要控制渲染、尺寸变化、预处理、销毁
这篇文章是写关于如何封装一个响应式的 ChangeSize 组件，组件继承了 SingleChildRenderObjectWidget，如果你也在写类似的功能，用这个父类可以快速的上手。
老铁记得 转发 ，猫哥会呈现更多 Flutter 好文~~~~
微信群 ducafecat
b 站 https://space.bilibili.com/404904528
原文
代码
https://github.com/MatrixDev/Flutter-CustomWidgets
参考
- https://pub.flutter-io.cn/packages/get#reactive-state-manager
- https://dart.dev/guides/language/extension-methods
正文
介绍
我写第二篇文章的时候到了。这次它将是一个非常简单的小部件，当它的子大小发生变化时，它会通知我们。这个任务非常简单，但是它的主要目的是向您展示如何在 RenderObject 中管理子对象。
当我刚开始学习 Flutter 的时候，它是我的问题之一，甚至是完成 Udemy 的课程，很遗憾，我没有得到我的答案。在 StackOverflow 上，人们建议在 Widget 上使用 GlobalKey，找到它的 RenderObject 并获取它的大小。
虽然上述解决方案没有任何问题，但我仍然不喜欢它的一些地方:
- 它改变了 Widget 元素的销毁方式
- 您需要在声明性小部件结构中添加命令式代码
- 没有能力实际跟踪小部件的大小，它需要根据需要拉
一般来说，我想要达到的目标是:
return ChildSize(
child: buildChildWidget(),
onChildSizeChanged: (size) => handleNewChildSize(size),
);
简单的理论
当编写一个包含子窗口的自定义窗口小部件时，我们需要知道一些重要的事情:
- 对于每个自定义小部件，我们需要编写它的 Element 和(有时) RenderObject 实现
- 元素将扩展其子元素 Widgets 为单独的元素，并在需要时更新/重新创建它们
- 几乎没有什么重要的角色ーー子代管理、布局、绘制和命中测试(鼠标指针、触摸事件等)
代码
首先，我们需要声明一个实际的 Widget:
class ChildSize extends SingleChildRenderObjectWidget {
final void Function(Size)? onChildSizeChanged;
const ChildSize({
Key? key,
Widget? child,
this.onChildSizeChanged,
}) : super(key: key, child: child);
}
这里没有什么新东西，除了 SingleChildRenderObjectWidget。这是 Flutter 框架中的一个帮手，它允许我们编写不超过一个子窗口的自定义窗口小部件。这大大简化了我们的代码，因为我们根本不需要编写定制的 Element。
我们唯一需要添加到 Widget 中的是创建 RenderObject，并在 Widget 更改时更新它:
class ChildSize extends SingleChildRenderObjectWidget {
// ...
@override
RenderObject createRenderObject(BuildContext context) {
return RenderChildSize().._widget = this;
}
@override
void updateRenderObject(BuildContext context, RenderChildSize renderObject) {
renderObject.._widget = this;
}
}
现在我们需要创建渲染对象:
class RenderChildSize extends RenderBox
with RenderObjectWithChildMixin<RenderBox> {
var _widget = const ChildSize();
}
是一个特殊的 mixin，我们在使用 SingleChildRenderObjectWidget 时必须添加它。这个 mixin 将处理所有无聊的东西(请参阅下一篇文章)。几乎这种类型的每个帮助器都需要添加一些 mixin。您可以在每个帮助器的文档中找到这些要求。
下一步要做的是布局我们的 child:
class RenderChildSize ... {
// ...
var _lastSize = Size.zero;
@override
void performLayout() {
final child = this.child;
if (child != null) {
child.layout(constraints, parentUsesSize: true);
size = child.size;
} else {
size = constraints.smallest;
} if (_lastSize != size) {
_lastSize = size;
_widget.onChildSizeChanged?.call(_lastSize);
}
}
}
在布局过程中我们必须决定渲染对象的大小。要做到这一点，我们需要布置我们的孩子。渲染对象的大小将与子对象的大小相同(我们没有任何填充、边距等)。
这里有一些重要的注意事项:
- 我们必须通过 parentUsesSize = true 子布局函数，以便事后得到它的大小。否则将抛出异常。感谢这个 flag Flutter 可以添加额外的优化
- 可能有这样一种情况，即使我们有一个子 Widget，也不会有它的子 RenderObject。并不是所有的小工具都有渲染对象。在这种情况下，如果存在任何最近的嵌套渲染对象，Flutter 将尝试提供给我们
在这个方法中，我们还检查大小是否发生了变化，并在发生变化时调用回调。
我们需要做的最后一件事就是描绘我们的 child 和路由命中测试事件:
class RenderChildSize ... {
// ...
@override
void paint(PaintingContext context, Offset offset) {
final child = this.child;
if (child != null) {
context.paintChild(child, offset);
}
}
@override
bool hitTestChildren(BoxHitTestResult result, {required Offset position}) {
return child?.hitTest(result, position: position) == true;
}
}
结果如下:
© 猫哥
往期
开源
GetX Quick Start
https://github.com/ducafecat/getx_quick_start
新闻客户端
https://github.com/ducafecat/flutter_learn_news
strapi 手册译文
微信讨论群 ducafecat
系列集合
译文
https://ducafecat.tech/categories/%E8%AF%91%E6%96%87/
开源项目
https://ducafecat.tech/categories/%E5%BC%80%E6%BA%90/
Dart 编程语言基础
https://space.bilibili.com/404904528/channel/detail?cid=111585
Flutter 零基础入门
https://space.bilibili.com/404904528/channel/detail?cid=123470
Flutter 实战从零开始 新闻客户端
https://space.bilibili.com/404904528/channel/detail?cid=106755
Flutter 组件开发
https://space.bilibili.com/404904528/channel/detail?cid=144262
Flutter Bloc
https://space.bilibili.com/404904528/channel/detail?cid=177519
Flutter Getx4
https://space.bilibili.com/404904528/channel/detail?cid=177514
Docker Yapi
https://space.bilibili.com/404904528/channel/detail?cid=130578
