ConstrainedBox UnconstrainedBox重点注意问题

更新时间:2023-05-25 21:55
1.多个ConstraintedBox嵌套时,最内部的child要符合外层所有的条件。比如嵌套时minWidth=10,minWidth = 40,minWidth=60,那么minWidth=60为准。
2.child 尺寸大小是由父级 Widget 给出的约束来调整的
3.
在将盒约束向子传递的过程中,子会根据父的盒约束,设置自己的盒约束,而不是单纯的继承父的盒约束。

当需要去除限制时可以参考:
 

UnconstrainedBox

UnconstrainedBox不会对子组件产生任何限制,它允许其子组件按照其本身大小绘制。一般情况下,我们会很少直接使用此组件,但在"去除"多重限制的时候也许会有帮助,我们看下下面的代码:

ConstrainedBox(
    constraints: BoxConstraints(minWidth: 60.0, minHeight: 100.0),  //父
    child: UnconstrainedBox( //“去除”父级限制
      child: ConstrainedBox(
        constraints: BoxConstraints(minWidth: 90.0, minHeight: 20.0),//子
        child: redBox,
      ),
    )
)

上面代码中,如果没有中间的UnconstrainedBox,那么根据上面所述的多重限制规则,那么最终将显示一个90×100的红色框。但是由于UnconstrainedBox “去除”了父ConstrainedBox的限制,则最终会按照子ConstrainedBox的限制来绘制redBox,即90×20:

图5-6

但是,读者请注意,UnconstrainedBox对父组件限制的“去除”并非是真正的去除:上面例子中虽然红色区域大小是90×20,但上方仍然有80的空白空间。也就是说父限制的minHeight(100.0)仍然是生效的,只不过它不影响最终子元素redBox的大小,但仍然还是占有相应的空间,可以认为此时的父ConstrainedBox是作用于子UnconstrainedBox上,而redBox只受子ConstrainedBox限制,这一点请读者务必注意。

那么有什么方法可以彻底去除父ConstrainedBox的限制吗?答案是否定的!所以在此提示读者,在定义一个通用的组件时,如果要对子组件指定限制,那么一定要注意,因为一旦指定限制条件,子组件如果要进行相关自定义大小时将可能非常困难,因为子组件在不更改父组件的代码的情况下无法彻底去除其限制条件。

更多参考:
https://blog.csdn.net/qq_23756803/article/details/103471209 
https://book.flutterchina.club/chapter5/constrainedbox_and_sizebox.html
https://www.jianshu.com/p/a9284c5a17b8