Flutter之ConstrainedBox、SizedBox、UnconstrainedBox（尺寸限制类容器）-阿里云开发者社区

Flutter之ConstrainedBox、SizedBox、UnconstrainedBox（尺寸限制类容器）

2021-12-18 240

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

容器镜像服务 ACR，镜像仓库100个不限时长

简介： Flutter之ConstrainedBox、SizedBox、UnconstrainedBox（尺寸限制类容器）

1 ConstrainedBox、SizedBox、UnconstrainedBox介绍

1)、ConstrainedBox用于对子组件添加额外的约束。例如，如果你想让子组件的最小高度是80像素

  ConstrainedBox({
    Key key,
    @required this.constraints,
    Widget child,
  })

我们可以看到这里有个constraints

  final BoxConstraints constraints;

class BoxConstraints extends Constraints {
  /// Creates box constraints with the given constraints.
  const BoxConstraints({
    this.minWidth = 0.0,
    this.maxWidth = double.infinity,
    this.minHeight = 0.0,
    this.maxHeight = double.infinity,
  }) : assert (minWidth != null),
       assert (maxWidth != null),
       assert (minHeight != null),
       assert (maxHeight != null);

我们可以看到BoxConstraints继承Constraints，然后一些属性设置。

有多重ConstrainedBox限制时，对于minWidth和minHeight来说，是取父子中相应数值较大的

2)、SizedBox：用于给子元素指定固定的宽高

3)、UnconstrainedBox：不会对子组件产生任何限制，它允许其子组件按照其本身大小绘制

一般用来去掉父约束

2 测试代码

测试1、

  @override
  Widget build(BuildContext context) {
      return MaterialApp(
          title: 'open url',
          home: Scaffold(
            appBar: AppBar(
              // Here we take the value from the MyHomePage object that was created by
              // the App.build method, and use it to set our appbar title.
              title: Text('hello flutter'),
            ),
            body: Center(
              child: ConstrainedBox(
                  constraints: BoxConstraints(
                      minWidth: double.infinity,
                      minHeight: 100
                  ),
                child: Container(
                    width: 50,
                    height: 50,
                    color: Colors.green,
                ),
              ),
            ),
          ),
      );
  }
}

测试2、

  @override
  Widget build(BuildContext context) {
      return MaterialApp(
          title: 'open url',
          home: Scaffold(
            appBar: AppBar(
              title: Text('hello flutter'),
            ),
            body: Center(
              child: ConstrainedBox(
                  constraints: BoxConstraints(
                      minWidth: 200,
                      minHeight: 100
                  ),
                child: ConstrainedBox(
                  constraints: BoxConstraints(
                      minWidth: 100,
                      minHeight: 200
                  ),
                  child:  Container(
                    width: 50,
                    height: 50,
                    color: Colors.green,
                  ),
                ),
              ),
            ),
          ),
      );
  }
}

测试3、

  @override
  Widget build(BuildContext context) {
      return MaterialApp(
          title: 'open url',
          home: Scaffold(
            appBar: AppBar(
              title: Text('hello flutter'),
            ),
            body: Center(
              child: ConstrainedBox(
                  constraints: BoxConstraints(
                      minWidth: 200,
                      minHeight: 100
                  ),
                child: UnconstrainedBox(
                  child: ConstrainedBox(
                    constraints: BoxConstraints(
                        minWidth: 50,
                        minHeight: 50
                    ),
                    child: Container(
                      width: 10,
                      height: 15,
                      color: Colors.red,
                    ),
                  ),
                ),
              ),
            ),
          ),
      );
  }
}