美文网首页
Flutter Layout组件之SizedBox

Flutter Layout组件之SizedBox

作者: 走在路上的日子 | 来源:发表于2022-09-29 16:58 被阅读0次

    一、给子组件附加紧约束

    SizedBox是一个单子元素布局组件,有 width,height 两个属性,可以给它的子组件传递紧约束,强制子组件的宽高等于 width,height 属性的值。
    示例代码如下:

    Container(
          color: Colors.red.shade200,
          child: const SizedBox(
              width: 200,
              height: 100,
              child: FlutterLogo(
                size: 200,
              )));
    

    运行效果如下:



    可以看到,FlutterLogo图片的高度并不是设置的200,而是SizedBox的height值100。

    二、特殊场景

    • 如果SizedBox的父组件给它自身传递了紧约束,那么SizedBox的width,height紧约束就会失去效果,比如父组件如果是屏幕或者是另一个SizedBox的情况下。
    • 如果SizedBox的宽或者高不设置的话,那么不设置的那条约束就会去匹配子组件的尺寸。
    • 如果SizedBox,不设置child的情况下,如果设置了宽高,布局就会用空白显示,这个可以用在给其他组件加间隔使用。
    • 如果SizedBox,不设置child的情况下,也没有设置宽高,它的width和height就会默认是0,屏幕什么都不会显示。

    SizedOverflowBox

    该组件跟 SizedBox 用法相同,不同的是SizedOverflowBox的尺寸可以超过其父组件。

    相关文章

      网友评论

          本文标题:Flutter Layout组件之SizedBox

          本文链接:https://www.haomeiwen.com/subject/lpjkartx.html