Flutter ConstrainedBox 约束子组件

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

马志武

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

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/ruoshui_t/article/details/101854084

Flutter 基础专栏收录该内容

73 篇文章

订阅专栏

本文详细介绍了Flutter中ConstrainedBox的使用方法，包括如何通过不同的构造函数设置子组件的宽高约束，例如设定最小高度、最大宽度等。此外还提供了多个代码示例帮助理解。

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

在其子项上施加其他约束的窗口小部件。

例如，如果您希望子级的最小高度为50.0逻辑像素，则可以将其const BoxConstraints(minHeight: 50.0)来约束。

参数详解

属性	说明
child	子组件
constraints	约束子组件的条件
属性constraints是 BoxConstraints类型的，所以这里简单介绍其属性
minWidth	最小宽度
maxWidth	最大宽度
minHeight	最小高度
maxHeight	最大高度
除了常用的属性外，还有一些构造函数会经常用到，如下：
BoxConstraints.tight(Size size)	设定指定宽带高约束（内容多少都这么大）
BoxConstraints.loose(Size size)	设定最大宽带高约束
BoxConstraints.tightFor({ double width, double height, })	设定宽带高约束（默认最小限制为0，最大限制为无穷大）
BoxConstraints.tightForFinite({ double width = double.infinity, double height = double.infinity, })	设定宽带高约束
BoxConstraints.expand({ double width, double height, })	设定宽带高约束（w，h空时，取最大）
BoxConstraints lerp( BoxConstraints a, BoxConstraints b, double t )	设定宽带高约束，a与b之间

代码示例

body: ConstrainedBox(
        constraints: const BoxConstraints.expand(),
        // constraints: BoxConstraints(minHeight: 100),
        // constraints: BoxConstraints(minWidth: 100),
        // constraints: BoxConstraints.lerp(BoxConstraints(minHeight: 0), BoxConstraints(minHeight: 150), 0.5),
        // constraints: BoxConstraints.loose(Size(30,120)),
        // constraints: BoxConstraints.tight(Size(30,120)),
        // constraints: BoxConstraints.lerp(a, b, t),
        // constraints: BoxConstraints.expand(width: 150,height: 150),
        // constraints: BoxConstraints.tightForFinite(),
        child: Container(
          color: Colors.green,
          child: Text('Hello World!')
          ),
      
      ),