页面布局 SizedBox ConstrainedBox LimitedBox AspectRatio FractionallySizedBox

标签：strong   padding   nts   ons   maxwidth   组件   nbsp   ble   width   

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,
        ),
      ),
    );

页面布局 SizedBox ConstrainedBox LimitedBox AspectRatio FractionallySizedBox

标签：strong   padding   nts   ons   maxwidth   组件   nbsp   ble   width   

原文地址：https://www.cnblogs.com/zhaofeis/p/12455856.html