zoukankan      html  css  js  c++  java
  • 页面布局 SizedBox ConstrainedBox LimitedBox AspectRatio FractionallySizedBox

    SizedBox

    const SizedBox({ 
    Key key,
    this.width, //宽
    this.height, //高
    Widget child //子组件
    })
    SizedBox(
             200.0,
            height: 200.0,
            child: new Container(
              color: Colors.red,
               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(
             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,
                 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,
           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,
            ),
          ),
        );
  • 相关阅读:
    web前段学习2017.6.15
    web前段学习2017.6.13
    web前端2017.6.10
    web前段2017.6.8
    web前段学习2016.6.6
    宏任务与微任务
    浏览器兼容性问题
    TCP 和 UDP 的区别
    React如何渲染大数据量的列表?
    移动端兼容性问题
  • 原文地址:https://www.cnblogs.com/zhaofeis/p/12455856.html
Copyright © 2011-2022 走看看