猫哥说

这是自定义组件的第二篇, 第一篇点这里

有的时候我们需要做些很基础的组件或者工具,我们需要控制渲染、尺寸变化、预处理、销毁

这篇文章是写关于如何封装一个响应式的 ChangeSize 组件,组件继承了 SingleChildRenderObjectWidget,如果你也在写类似的功能,用这个父类可以快速的上手。

老铁记得 转发 ,猫哥会呈现更多 Flutter 好文~~~~

微信群 ducafecat

b 站 https://space.bilibili.com/404904528

原文

https://rlesovyi.medium.com/writing-custom-widgets-in-flutter-part-2-singlechildrenderobjectwidget-5637fecdf9bb

代码

https://github.com/MatrixDev/Flutter-CustomWidgets

参考

正文

介绍

我写第二篇文章的时候到了。这次它将是一个非常简单的小部件,当它的子大小发生变化时,它会通知我们。这个任务非常简单,但是它的主要目的是向您展示如何在 RenderObject 中管理子对象。

当我刚开始学习 Flutter 的时候,它是我的问题之一,甚至是完成 Udemy 的课程,很遗憾,我没有得到我的答案。在 StackOverflow 上,人们建议在 Widget 上使用 GlobalKey,找到它的 RenderObject 并获取它的大小。

虽然上述解决方案没有任何问题,但我仍然不喜欢它的一些地方:

  • 它改变了 Widget 元素的销毁方式
  • 您需要在声明性小部件结构中添加命令式代码
  • 没有能力实际跟踪小部件的大小,它需要根据需要拉

一般来说,我想要达到的目标是:

1
2
3
4
return ChildSize(
child: buildChildWidget(),
onChildSizeChanged: (size) => handleNewChildSize(size),
);

简单的理论

当编写一个包含子窗口的自定义窗口小部件时,我们需要知道一些重要的事情:

  • 对于每个自定义小部件,我们需要编写它的 Element 和(有时) RenderObject 实现
  • 元素将扩展其子元素 Widgets 为单独的元素,并在需要时更新/重新创建它们
  • 几乎没有什么重要的角色ーー子代管理、布局、绘制和命中测试(鼠标指针、触摸事件等)

代码

首先,我们需要声明一个实际的 Widget:

1
2
3
4
5
6
7
8
9
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 更改时更新它:

1
2
3
4
5
6
7
8
9
10
11
12
13
class ChildSize extends SingleChildRenderObjectWidget {
// ...

@override
RenderObject createRenderObject(BuildContext context) {
return RenderChildSize().._widget = this;
}

@override
void updateRenderObject(BuildContext context, RenderChildSize renderObject) {
renderObject.._widget = this;
}
}

现在我们需要创建渲染对象:

1
2
3
4
class RenderChildSize extends RenderBox
with RenderObjectWithChildMixin<RenderBox> {
var _widget = const ChildSize();
}

是一个特殊的 mixin,我们在使用 SingleChildRenderObjectWidget 时必须添加它。这个 mixin 将处理所有无聊的东西(请参阅下一篇文章)。几乎这种类型的每个帮助器都需要添加一些 mixin。您可以在每个帮助器的文档中找到这些要求。

下一步要做的是布局我们的 child:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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 和路由命中测试事件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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;
}
}

结果如下:

###

###


© 猫哥

https://ducafecat.tech/

https://github.com/ducafecat

往期

开源

GetX Quick Start

https://github.com/ducafecat/getx_quick_start

新闻客户端

https://github.com/ducafecat/flutter_learn_news

strapi 手册译文

https://getstrapi.cn

微信讨论群 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