1?ConstrainedBox、SizedBox、UnconstrainedBox介紹

1)、ConstrainedBox用于對子組件添加額外的約束。例如，如果你想讓子組件的最小高度是80像素

  ConstrainedBox({Key key,@required this.constraints,Widget child,})

我們可以看到這里有個constraints

  final BoxConstraints constraints;

class BoxConstraints extends Constraints {/// Creates box constraints with the given constraints.const BoxConstraints({this.minWidth = 0.0,this.maxWidth = double.infinity,this.minHeight = 0.0,this.maxHeight = double.infinity,}) : assert (minWidth != null),assert (maxWidth != null),assert (minHeight != null),assert (maxHeight != null);

我們可以看到BoxConstraints繼承Constraints，然后一些屬性設置。

有多重ConstrainedBox限制時，對于minWidth和minHeight來說，是取父子中相應數值較大的

?

?

2)、SizedBox：用于給子元素指定固定的寬高

3)、UnconstrainedBox：不會對子組件產生任何限制，它允許其子組件按照其本身大小繪制

一般用來去掉父約束

?

?

?

?

?

2 測試代碼

測試1、

  @overrideWidget build(BuildContext context) {return MaterialApp(title: 'open url',home: Scaffold(appBar: AppBar(// Here we take the value from the MyHomePage object that was created by// the App.build method, and use it to set our appbar title.title: Text('hello flutter'),),body: Center(child: ConstrainedBox(constraints: BoxConstraints(minWidth: double.infinity,minHeight: 100),child: Container(width: 50,height: 50,color: Colors.green,),),),),);}
}

測試2、

  @overrideWidget build(BuildContext context) {return MaterialApp(title: 'open url',home: Scaffold(appBar: AppBar(title: Text('hello flutter'),),body: Center(child: ConstrainedBox(constraints: BoxConstraints(minWidth: 200,minHeight: 100),child: ConstrainedBox(constraints: BoxConstraints(minWidth: 100,minHeight: 200),child:  Container(width: 50,height: 50,color: Colors.green,),),),),),);}
}

?

測試3、

@overrideWidget build(BuildContext context) {return MaterialApp(title: 'open url',home: Scaffold(appBar: AppBar(title: Text('hello flutter'),),body: Center(child: ConstrainedBox(constraints: BoxConstraints(minWidth: 200,minHeight: 100),child: UnconstrainedBox(child: ConstrainedBox(constraints: BoxConstraints(minWidth: 50,minHeight: 50),child: Container(width: 10,height: 15,color: Colors.red,),),),),),),);}
}

?

?

?

?

?

?

?

3 運行效果