全网最详细的一篇Flutter 尺寸限制类容器总结

移动开发作者： 2024-08-22 20:05:01

Flutter中尺寸限制类容器组件包括ConstrainedBox、UnconstrainedBox、SizedBox、AspectRatio、FractionallySizedBox、Limited

ConstrainedBox(
  constraints: BoxConstraints(maxHeight: 60,maxWidth: 200),child: Container(height: 300,width: 300,color: Colors.red),)

const BoxConstraints({
  this.minWidth = 0.0,this.maxWidth = double.infinity,//无限大
  this.minHeight = 0.0,this.maxHeight = double.infinity,//无限大
});

ConstrainedBox(
  constraints: BoxConstraints(maxHeight: 60,child: ConstrainedBox(
    constraints: BoxConstraints(maxHeight: 100,maxWidth: 240),),)

Container(
  height: 200,width: 200,child: UnconstrainedBox(
    child: Container(height: 300,)

UnconstrainedBox(
  alignment: Alignment.topLeft,...
)

SizedBox(
  height: 60,child: RaisedButton(
    child: Text('this is SizedBox'),)

SizedBox(
  height: double.infinity,width: double.infinity,...
)

SizedBox.expand(
  child: RaisedButton(
    child: Text('this is SizedBox'),)

Column(
  children: <Widget>[
    Container(height: 30,SizedBox(height: 10,Container(height: 30,],)

AspectRatio(
  aspectRatio: 2 / 1,child: Container(color: Colors.red),)

FractionallySizedBox(
  widthFactor: .7,child: RaisedButton(
    child: Text('button'),)

FractionallySizedBox(
  alignment: Alignment.centerLeft,...
)

Container(
  height: 200,color: Colors.grey,child: Column(
    children: <Widget>[
      Container(
        height: 50,color: Colors.red,Flexible(
        child: FractionallySizedBox(
          heightFactor: .1,Container(
        height: 50,color: Colors.blue,)

Container(
  height: 100,width: 100,child: LimitedBox(
    maxHeight: 50,maxWidth: 100,child: Container(color: Colors.green,)

ListView(
  children: <Widget>[
    Container(
      color: Colors.green,Container(
      color: Colors.red,)

ListView(
  children: <Widget>[
    LimitedBox(
      maxHeight: 100,child: Container(
        color: Colors.green,LimitedBox(
      maxHeight: 100,child: Container(
        color: Colors.red,)

Container(
  height: 100,...
)

ConstrainedBox：适用于需要设置最大/小宽高，组件大小以来子组件大小，但不能超过设置的界限。
UnconstrainedBox：用到情况不多，当作ConstrainedBox的子组件可以“突破”ConstrainedBox的限制，超出界限的部分会被截取。
SizedBox：适用于固定宽高的情况，常用于当作2个组件之间间隙组件。
AspectRatio：适用于固定宽高比的情况。
FractionallySizedBox：适用于占父组件百分比的情况。
LimitedBox：适用于没有父组件约束的情况。
Container：适用于不仅有尺寸的约束，还有装饰（颜色、边框、等）、内外边距等需求的情况。