Flutter的BoxConstraints

最新推荐文章于 2025-06-05 10:21:42 发布

LiuMH2011

最新推荐文章于 2025-06-05 10:21:42 发布

阅读量526

点赞数 1

CC 4.0 BY-SA版权

文章标签： flutter

本文链接：https://blog.youkuaiyun.com/LiuMH2011/article/details/120076055

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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
                )
            )
        )
    ),
)