页面布局 SizedBox ConstrainedBox LimitedBox AspectRatio FractionallySizedBox

SizedBox

const SizedBox({ 
Key key,
this.width, //宽
this.height, //高
Widget child //子组件
})
SizedBox( width: 200.0, height: 200.0, child: new Container( color: Colors.red, width: 100.0, height: 300.0, ), ),

ConstrainedBox(限定最大最小宽高布局)

return new ConstrainedBox( constraints: const BoxConstraints( minWidth: 100.0, minHeight: 100.0, maxWidth: 150.0, maxHeight: 150.0, ), child: new Container( width: 200.0, height: 200.0, color: Colors.red, ), );

 LimitedBox(限定最大宽高布局)

const LimitedBox({ Key key, this.maxWidth = double.infinity, this.maxHeight = double.infinity, Widget child,})
LimitedBox( maxWidth: 150.0, child: new Container( color: Colors.blue, width: 250.0, ), )

AspectRatio(调整宽高比)

const AspectRatio({ Key key, @required this.aspectRatio, Widget child}) 
return new Container( height: 200.0, child: new AspectRatio( aspectRatio: 1.5, child: new Container( color: Colors.red, ), ), );

FractionallySizedBox(百分比布局)

 

return new Container( color: Colors.blue, height: 150.0, width: 150.0, padding: const EdgeInsets.all(10.0), child: new FractionallySizedBox( alignment: Alignment.topLeft, widthFactor: 1.5, heightFactor: 0.5, child: new Container( color: Colors.red, ), ), );

相关文章