Flutter的BoxConstraints

原创于 2021-09-03 10:40:02 发布 · 548 阅读

CC 4.0 BY-SA版权

文章标签：

本文探讨了在Flutter中如何使用BoxConstraints设置尺寸限制，并通过UnconstrainedBox实现子元素不受父级约束的影响。实例演示了如何设置最小高度、宽度和最大尺寸，以及如何利用UnconstrainedBox包裹解除父级约束的效果。

在css中，有min-height, max-height, min-width, max-width样式；

在Flutter中想设定这些样式，就得用BoxConstraints类；

而且跟css样式一样，BoxConstraints约束会被其child继承；

ConstrainedBox(
    constraints: BoxConstraints(
        minHeight: 30,
        minWidth: 30,
        maxHeight: 100,
        maxWidth: 100
    ),
    child: Container(
        width:10000,
        height: 10000,
        decoration: BoxDecoration(
            color: Colors.red
        )
    ),
)

上例中，Container最终大小为width:100, height: 100

想要消除父级的约束影响，使用UnconstrainedBox再包裹一层，接着上例：

ConstrainedBox(
    constraints: BoxConstraints(
        minHeight: 30,
        minWidth: 30,
        maxHeight: 100,
        maxWidth: 100
    ),
    child: Container(
        width:10000,
        height: 10000,
        decoration: BoxDecoration(
            color: Colors.red
        ),
        child: UnconstrainedBox(
            child: Container(
                width: 10,
                height: 10,
                decoration: BoxDecoration(
                    color: Colors.blue
                )
            )
        )
    ),
)