新建项目-4.png

SizedBox

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

  1. SizedBox(
  2. width: 200,height: 200,
  3. child: Card(
  4. child: Text(
  5. 'Hello Flutter'
  6. ),
  7. ),
  8. )

image.png

SizedBox.fromSize

  1. SizedBox.fromSize(
  2. child: Container(
  3. width: 50.0,
  4. height: 50.0,
  5. color: Colors.blue
  6. ),
  7. size:Size(300,300),
  8. )

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

image.png

SizedBox.expand 占满父布局


  1. SizedBox(
  2. width: 200,
  3. height: 200,
  4. child: SizedBox.expand(
  5. child: Container(
  6. width: 10.0,
  7. height: 10.0,
  8. color: Colors.red
  9. ),
  10. ),
  11. )

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

image.png

FractionallySizedBox 百分比控制大小

  1. SizedBox(
  2. width: 300,
  3. height: 300,
  4. child: FractionallySizedBox(
  5. widthFactor: 0.5,
  6. heightFactor: 0.5,
  7. child:Container(
  8. width: 200.0,
  9. height: 200.0,
  10. color: Colors.orange
  11. ),
  12. ),
  13. ),

image.png

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

  1. SizedOverflowBox(
  2. size: Size(50,50),
  3. child:Container(
  4. width: 200.0,
  5. height: 200.0,
  6. color: Colors.orange
  7. ),
  8. ),

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

image.png