Flutter教学目录持续更新中

Github源代码持续更新中

1.SizedBox介绍

一个特定大小的盒子。这个widget给予子控件宽度和高度。如果宽度或高度为null，则此widget将调整自身大小以匹配子控件的大小。

2.SizedBox属性

• width：宽
• height： 高
• child：

SizedBox尺寸调节：

• SizedBox没有宽高约束，子控件有宽高约束，那么SizedBox会调节自己匹配子控件大小
• SizedBox有宽高约束，SizedBox子控件没有宽高约束，SizedBox父控件无约束，那么SizedBox会将自己的约束条件给予SizedBox子控件
• SizedBox父控件有约束，那么约束会传递给SizedBox

  _myChild() {
    return DecoratedBox(decoration: BoxDecoration(color: Colors.red));
  }

          SizedBox(
            child: Container(
              width: 20,
              height: 20,
              child: _myChild(),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 10),
            child: SizedBox(
              width: 20,
              height: 20,
              child: _myChild(),
            ),
          ),
          Container(
            width: 20,
            height: 20,
            margin: EdgeInsets.only(top: 10),
            child: SizedBox(
              child: _myChild(),
            ),
          ),

3.SizedBox.expand属性

• child：

尽可能大的在父控件的约束内显示

          Container(
            margin: EdgeInsets.only(top: 10),
            color: Colors.blue,
            width: 50,
            height: 50,
            child: SizedBox.expand(
              child: _myChild(),
            ),
          ),

4.SizedBox.shrink属性

• child：

尽可能小的在父控件的约束内显示

          Container(
            margin: EdgeInsets.only(top: 10),
            color: Colors.blue,
            constraints: BoxConstraints(
              maxWidth: 100,
              maxHeight: 100,
              minWidth: 10,
              minHeight: 10,
            ),
            child: SizedBox.shrink(
              child: _myChild(),
            ),
          ),

5.SizedBox.fromSize属性

• size：Size
• child：

以Size尺寸约束

  _mySize() {
    return Size(20, 20);
  }

          Container(
            margin: EdgeInsets.only(top: 10),
            child: SizedBox.fromSize(
              size: _mySize(),
              child: _myChild(),
            ),
          ),

6.最后我们顺便讲一下Size

• Size(width, height)：指定宽高
• Size.copy(size) ：从另一个Size复制尺寸
• Size.square(dimension)：正方形，dimension：边长
• Size.fromWidth(width)：指定宽度
• Size.fromHeight(height)：指定高度
• Size.fromRadius(radius)：指定半径，结果一样是正方形，Size.fromRadius(radius) = Size.square(2* radius)

image.png

下一节：Layout组件之Transform

Flutter（59）：Layout组件之Transform

Flutter教学目录持续更新中

Github源代码持续更新中