新建项目-4.png

SizedBox

主要应用在 对子控件的大小的一些约束，能强制子控件具有特定宽度、高度或两者都有,使子控件设置的宽高失效

SizedBox(
  width: 200,height: 200,
  child: Card(
    child: Text(
      'Hello Flutter'
    ),
  ),
)

image.png

SizedBox.fromSize

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

可以看到子控件设置 宽高是50 . 但是实际是外面设置的 300

image.png

SizedBox.expand 占满父布局

 SizedBox(
  width: 200,
  height: 200,
  child: SizedBox.expand(
    child:  Container(
        width:  10.0,
        height: 10.0,
        color: Colors.red
    ),
  ),
)

SizedBox.expand 占满父布局大小。你品你细品

image.png

FractionallySizedBox 百分比控制大小

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

image.png

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

 SizedOverflowBox(
  size: Size(50,50),
  child:Container(
      width: 200.0,
      height: 200.0,
      color: Colors.orange
  ),
),

红色的也是200*200.所以改控件没有裁剪

image.png