flutter布局约束与原理

布局简介

flutter 中布局类组件通常具有一个或多个子组件,根据排列方式不同,通常分为以下三类

布局类组件直接或间接继承SingleChildRenderObjectWidget和MultiChildRenderObjectWidget,
继承关系为Widget→RenderObjectWidget→Leaf/SingleChild/MultiChildRenderObjectWidget
在RenderObjectWidget中存在一个方法RenderObject,所有继承至RenderObjectWidget的组件都必须实现该方法.因为该方法是渲染 UI 界面,实现最终布局.

约束的基本要义

在 flutter 中分为两种布局模式RenderBox→盒模型与sliver (RenderSliver)→按需加载列表模型
不管哪种模型,都存在约束,父级传递约束到子级,子级根据自身大小以适应父级约束,比如父级传递约束为宽度最大 100,高度最大 100,然后我们定义了一个宽度均为 200 的子组件,则子组件最终渲染大小为 100*100.
BoxConstraints是盒模型中父组件传递给子组件的约束

const BoxConstraints = ({
    minHeight:0.0,
    maxHeight:double.Infinity,
    minWidth:0.0,
    maxWidth:double.Infinity
})

BoxConstraints还有一些便捷构造函数,BoxConstraints.tight(size)用于生成一个固定宽高的约束,BoxConstraints.expand()生成一个尽可能大的以满足子组件自身宽高的约束

SizedBox

SizedBox 提供了一个快捷定义宽高的约束

SizedBox({
    height:30,
    width:30,
    child: redBox
})

而以上只是对BoxConstraints.tightFor(width:30,height:30)的定制,而tightFor又等价于如下

BoxConstraints({
    width:30,
    maxWidth:30,
    height:30,
    maxHeight:30
})

多重约束

牢记一个理论 1.取最大值的 minHeight 与 minWidth 2.取最小值的 maxHeight 与 maxHeight

去除约束

可以使用UnconstrainedBox来解除父级约束对于子级的大小影响,但这不是真正的去除,只是约束作用于UnconstrainedBox的时候,UnconstrainedBox不会继续往下传递约束

ConstrainedBox(
    constraints:BoxConstraints(
        minHeight:200,
        minWidth:200
    ),
    child:UnconstrainedBox(
        child: ConstrainedBox(
            constraints:BoxConstraints(
                minHeight:100,
                minWidth:200
            ),
            child:redBox
        )
    )
)

如上述代码,将渲染一个 100 _ 100 的红色盒子,但是整个组件宽高依旧是 200 _ 200,这说明UnconstrainedBox没有继续往下透传约束

每日单词拼写