SizedBox

主要应用在对子控件的大小的一些约束，如

SizedBox(
              width: 200.0,
              height: 300.0,
              child: const Card(child: Text('Hello World!')),
           )

这样很好的把子控件的文本限制在一定的范围内了。另外还有一些用法：

• SizedBox.fromSize

SizedBox.fromSize(
              child:  Container(
                  width: 200.0,
                  height: 200.0,
                  color: Colors.red
              ),
              size:Size(300,300),
            )

• SizedBox.expand 的用法

SizedBox(
              width: 300,
              height: 300,
              child: SizedBox.expand(
                child:  Container(
                    width: 200.0,
                    height: 200.0,
                    color: Colors.red
                ),
              ),
            )

类似 match 的效果，SizedBox.expand 占满父布局大小。

• FractionallySizedBox

SizedBox(
              width: 300,
              height: 300,
              child: FractionallySizedBox(
                widthFactor: 0.5,
                heightFactor:  0.5,
                child:Container(
                    width: 200.0,
                    height: 200.0,
                    color: Colors.red
                ),
              ),
            ),

百分比控制大小

• SizedOverflowBox

SizedOverflowBox(
              size: Size(300,300),
              child:Container(
                  width: 400.0,
                  height: 400.0,
                  color: Colors.red
              ),
            ),

子控件大小可以超过父控件大小

• OverflowBox

OverflowBox(
              minHeight: 200,
              maxWidth: 200,
              child:Container(
                  width: 100.0,
                  height: 100.0,
                  color: Colors.red
              ),
            ),

设置最小高度和最大高度

• LimitedBox

LimitedBox(
              maxWidth: 100.0,
              maxHeight: 100.0,
              child:Container(
                  width: 100.0,
                  height: 100.0,
                  color: Colors.red
              ),
           ),

限制最大宽度和高度。

SizedBox 的源码 UML 图

SizedBox.png

可以发现， SizedBox 并不是继承 StatelessWidget 。它继承与 SingleChildRenderObjectWidget，常用于具有唯一子类的控件，不具有更新状态的功能。在 SingleChildRenderObjectWidget 的 createElement 方法会创建 SingleChildRenderObjectElement ，这时候创建完成后 Element 生命周期就处于 Initial 状态。 SingleChildRenderObjectElement 又继承于 RenderObjectElement ，RenderObjectElement 常配合 RenderObjectWidget 使用。不过最终继承于 Element 。 Element 具有一个重要的方法 mount 。这个方法在 RenderObjectToWidgetAdapter 的 attachToRenderTree 会调用，调用完 mount 方法后，Element 生命周期就处于 Active 状态。另外 RenderObjectToWidgetAdapter 其实也是一个 RenderObject 。

Card

类似 Android 里面 的 CardView 。用法如上面例子里面的

const Card(child: Text('Hello World!'))

另外还有一些属性

• color 卡片背景颜色
• elevation 卡片阴影
• shape 阴影形状
• borderOnForeground 看不出来什么效果
• margin 和对应控件的间距
• clipBehavior 裁剪 Card 控件的模式

1. Clip.none 无模式
2. Clip.hardEdge 裁剪速度很快，但容易失真，会有锯齿。
3. Clip.antiAlias 裁剪边缘抗锯齿，裁剪更平滑，裁剪速度比 Clip.antiAliasWithSaveLayer 快，但是比 Clip.hardEdge 慢，常用于圆形和弧形之类的形状裁剪。
4. Clip.antiAliasWithSaveLayer 裁剪后具有抗锯齿特性并分配屏幕缓冲区，所有后续操作在缓冲区进行，然后再进行裁剪和合成，很少使用。

SizedBox(
              width: 200.0,
              height: 300.0,
              child: new Card(
                child: Text('Hello World!'),
                color: Colors.red,
                elevation: 10.0,
                shape: new RoundedRectangleBorder(
                  side: new BorderSide(style: BorderStyle.none),
                  borderRadius: BorderRadius.circular(5.0)
                ),
                borderOnForeground:true,
                margin: EdgeInsets.all(20.0),
                clipBehavior:Clip.antiAlias ,
              ),
           )

效果图.png