【布局 widget】OverflowBox 与 SizedOverflowBox

最新推荐文章于 2024-05-27 23:53:34 发布

蚂蚁二娘

最新推荐文章于 2024-05-27 23:53:34 发布

阅读量430

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/web2022050901/article/details/128404464

版权

本文详细介绍了Flutter中的OverflowBox和SizedOverflowBox组件。OverflowBox允许子组件超出其父容器边界，调整约束以适应不同需求。SizedOverflowBox则具有固定尺寸，子组件在其内部可能溢出。两者在特定场景下提供了一种布局灵活性，例如实现CSS中的outline效果。文章还探讨了它们的应用场景和差异，并指出溢出部分无法响应点击事件。

摘要由CSDN通过智能技术生成

OverflowBox

对于 OverflowBox ,文档只有一句话：把不同的约束强加给 child，允许 child overflow 父容器。这句话说的太简略了，使用的时候还是一头雾水，代码逻辑是这样的:

 BoxConstraints _getInnerConstraints(BoxConstraints constraints) {return BoxConstraints(minWidth: _minWidth ?? constraints.minWidth,maxWidth: _maxWidth ?? constraints.maxWidth,minHeight: _minHeight ?? constraints.minHeight,maxHeight: _maxHeight ?? constraints.maxHeight,);}@overridevoid performLayout() {if (child != null) {child?.layout(_getInnerConstraints(constraints), parentUsesSize: true);alignChild();}}

用语言描述就是，优先取 OverflowBox 的 minWidth，maxWidth，minHeight，maxHeight，父级的约束值是用来兜底的，这样就清晰多了。parentUsesSize: true 是因为 OverflowBox 有 align 属性，需要摆放 child,比如想把 child 右对齐，如果不知道 child 的 size ，就无法知道 child 左边的 offset 是多少，所以 child 尺寸变化的时候，需要通知 OverflowBox ，让 OverflowBox 重新计算 offset ，调