本系列教程基于Flutter widget, 意在为Flutter 入门提供基础建设. 重点在讲解widget 的 用法,参数以及扩展.
适宜人群: 入门

引语

OverflowBox 允许 Widget 超过限制的范围去绘制, 它对子 Widget 的约束和其从父 Widget 获取的约束不同, 可能是允许子部件超过父部件大小.

OverflowBox

OverfloewBox 最简单的用法就是嵌套在需要突破父约束的子 widget 外部. 通过一个示例, 你可以进一步感受到它的功能. 我们实现如下代码:

1
2
3
4
5
6
7
8
9
Container(
    height: 100,
    width: 100,
    color: Colors.blue,
    child: Image.network(
        imageUrl,
        height: 200,
    ),
)

我们创建了一个100*100 限制的 Container , 并且放入了一个高 200 的图片.

结果如图:

image

我们发现实际上图片并没有按照我们的设定的高度展示, 仅仅按限制的大小自行缩放了. 这说明图片是按父大小约束的. OverfloewBox 既然可以不受约束, 我们可以添加一个重定义下子的约束大小. 

1
2
3
4
5
OverflowBox(
    maxHeight: 200,
    child: // Image,
),

这里我们在原 Image 外添加一个 OverflowBox. 通过给它加入 maxHeight, 就可以再定义子的约束大小.

结果如图:

image

我们可以看到图片此时已经高度达到了我们需求的样子, 但是父 Widget 限制仍然没有变. 具体的实现我们可以通过它的 RenderObject 来寻找.

RenderConstrainedOverflowBox

之所以可以内部另外去绘制 child, 主要归功于 _getInnerConstraints 这个方法的实现. 如果你传入了新的限制大小, 那么最终的限制大小实际上是你传入的大小去返回的.

image
最终布局中 child 会通过我们输入的约束去布局.达成了子 Widget 可以超越父约束去布局

image

这里是WeninerIo😇

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

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

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

那就点个关注吧! 🙏

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