引子

ConstrainedBox 是 Flutter 中用于组件范围约束的盒子, 我们最早在 Container 中提过有关于 ConstrainedBox 的运用. 实际使用中, 往往有更多的使用场景需要用到 ConstrainedBox . 例如在 dialog 中需要设定 dialog 的最大值和最小值.

ConstrainedBox

那么, ConstrainedBox 是怎么达成限制子布局大小的目地的呢? 这里可以在 ConstrainedBox 源码中找到答案. 我们都知道 Flutter 有三棵树的存在, 这里的重中之重便是 RenderObject , 因为它是整个渲染的根基. 我们也关心一下 ConstrainedBox 的 RenderObject 是怎么实现的吧?

image

RenderConstrainedBox

在 RenderConstrinedBox 中, 它通过重写 compute 开头的一系列, 定义了盒子的整体大小区间. 然后通过 perfomrLayout 去真正的布局界面. 就让我们一起来看看它的实现吧!

performLayout

在 RenderConstrainedBox 中, 通过 performLayout 我们可以具体看到布局行为是如何执行的. ConstrainedBox (以下统称 widget ) 通过判断是否拥有 child 组件来执行不同的布局方法. 当拥有 child 时, 会根据 child 的尺寸大小去再匹配约束, 然后生成当前 widget 的尺寸; 当没有 child 是, 当前的尺寸将不再受 child 约束, 反过来填满父尺寸.
image

computeDryLayout

在执行干布局中, 我们仍然是根据 child 的有无去执行相应的条件. 唯一的不同是有 child 的时候, 通过 getDryLayout 来获取尺寸. 当然了, 这里也是通过对应的约束做到的.
image

思考

ConstrainedBox 作为一个尺寸限制的组件, 我们可以看到它在整个尺寸的处理上下了很大功夫, 我们可以模仿着试试自己完成这一套逻辑.

这里是WeninerIo😇

如果你对这次的技术分享感兴趣或者有什么疑惑🧐

不妨在评论区留言或私信🤪

或许这次的分享不是你所期待的😣

那就点个关注吧! 🙏

下次也许就是你中意的呢🫣?