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 控件的模式
- Clip.none 无模式
- Clip.hardEdge 裁剪速度很快，但容易失真，会有锯齿。
- Clip.antiAlias 裁剪边缘抗锯齿，裁剪更平滑，裁剪速度比 Clip.antiAliasWithSaveLayer 快，但是比 Clip.hardEdge 慢，常用于圆形和弧形之类的形状裁剪。
- 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
