Flutter 布局

Container 布局

1. Container 没有子widget， 大小是父widget 大小

Container(

    color: Colors.yellow，

)

2. Container 有子widget， 大小是子widget 大小

Container(

    color: Colors.yellow

    child: Text('container'),

) 

3.Container 有子widget，并且设置alignment 大小是父widget 大小

Container(

color: Colors.yellow,

alignment: Alignment(0,0),

child: Text('container'),

)

Row 或 Column 布局

主轴：MainAxisAlignment

    spaceBetween: 小部件两端对齐，剩下的空间平均分布

    spaceAround:  剩下的空间平均分布到小部件周围！！

    spaceEvenly：剩下的空间和小部件一起平均分！！

    start 向主轴开始的方向对齐。

    end 向主轴结束的方向对齐。

    center 主轴方向居中对齐

交叉轴：CrossAxisAlignment 垂直于主轴方向

    baseline：文字底部对齐

    center：交叉轴方向居中对齐。

    end：向交叉轴结束的方向对齐。；

    start：向交叉轴开始的方向对齐；

    stretch：填满交叉轴方向；

Expanded 在主轴方向填充剩下间隙

crossAxisAlignment: baseline, 使用方法

Row(

    mainAxisAlignment: MainAxisAlignment.spaceAround,

    crossAxisAlignment: CrossAxisAlignment.baseline,

    textBaseline: TextBaseline.ideographic,

）

Stack 布局

方向从里到外

Stack 大小 是包含第一个widget的大小， 与Positioned 部件配套使用

Container(

    color: Colors.yellow,

    alignment: Alignment(0,0),

    child: Stack(

        children: [

        Container(color: Colors.red, width:80, height:80,),

        Positioned(

            child: Container(

                color: Colors.green,

                width:60,

                height:60,

            ),

            right:5,

        ),

        Container(

        color: Colors.blue,

        width:40,

        height:40,

    ),

    ],

    ),

)

宽高比布局

AspectRatio 部件对父widget 起作用

创建宽度是屏幕宽，宽高比2/1

Container(

    color: Colors.yellow,

    alignment: Alignment(0,0),

    child:Container(

        color: Colors.red,

//        width: 100,

        child: AspectRatio(

            aspectRatio:2 /1,

            child: Text('aspectRatio'，

        ),

    ),

),

)