第三章：Flutter之布局

前言：上一节，我们已经简单地完成了一个listview的demo，里面我们见到了''Row''、'Column‘的子布局，这节主要详细剖析一下这些布局方式。

Container布局

• Row ：子部件横向排列

Container(
        child: Row(
          children: [
            Container(color: Colors.red,width: 120,height: 120,child: Text('11111'),),
            Container(color: Colors.yellow,width: 100,height: 100,child: Text('22222'),),
            Container(color: Colors.blue,width: 80,height: 80,child: Text('33333'),),
          ],
        )
    );

6.png

• Column : 子部件纵向排列

Container(
        child: Column(
          children: [
            Container(color: Colors.red,width: 120,height: 120,child: Text('11111'),),
            Container(color: Colors.yellow,width: 100,height: 100,child: Text('22222'),),
            Container(color: Colors.blue,width: 80,height: 80,child: Text('33333'),),
          ],
        )
    );

7.png

• Stack : 子部件重叠排列(没有主轴和交叉轴，可以用aligment)

Container(
        child: Stack(
          children: [
            Container(color: Colors.red,width: 120,height: 120,child: Text('11111'),),
            Container(color: Colors.yellow,width: 100,height: 100,child: Text('22222'),),
            Container(color: Colors.blue,width: 80,height: 80,child: Text('33333'),),
          ],
        )
    );

8.png

• AspectRatio :比例布局

class AspectWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 200,
      color: Colors.blue,
      child: AspectRatio(
        aspectRatio: 2/4,//一定要设置这个（宽高比）
        child: Icon(Icons.add),
      ),
    );
  }
}

• alignment :用来确定布局的所在的对齐中心点 。默认的是（-1，-1）,当子布局条件为Row的时候，其(x,y)y值改变有意义，x值无论怎么变都没意义。,当子布局条件为Column的时候，其(x,y)x值改变有意义，y值无论怎么变都没意义.

1.屏幕的中心点(0,0)

class TestWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment(0.0,0.0),//中心点
      child: Text('Flutter Demo22'),
    );
  }
}

1@2x.png

2.屏幕的左上角

class TestWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment(-1.0,-1.0),//中心点
      //等价于注释掉
      child: Text('Flutter Demo22'),
    );
  }
}

2@2x.png

3.屏幕的右下角(1,1)

class TestWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment(1.0,1.0),//中心点
      child: Text('Flutter Demo22'),
    );
  }
}

3@2x.png

• mainAxisAlignment :主轴，用来决定主轴上各个部件的排列方式。
  start : Row的条件下，从左向右依次排列,左边第一个部件与屏幕对齐，各部件之间没有间隔；Column的条件下，从上到下依次排列，上面第一个部件与屏幕对齐，各部件之间没有间距
center、end 、spaceBetween 、spaceAround 、spaceEvenly依次类推

• crossAxisAlignment : 次轴，决定各个部件在次轴上的对齐方式。

分析以下代码片段，各部件应该怎么显示？？？

class TestWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment(1,0),//屏幕右边中心
      child: Column(//列布局
        mainAxisAlignment: MainAxisAlignment.end,//主轴
        crossAxisAlignment: CrossAxisAlignment.start,//次轴
        children: [
          Container(color: Colors.red,width: 120,height: 120,child: Text('11111'),),
          Container(color: Colors.yellow,width: 100,height: 100,child: Text('22222'),),
          Container(color: Colors.blue,width: 80,height: 80,child: Text('33333'),),
        ],
      )
    );
  }
}

分析`:
1.首先我们看到aligment为（1，0）,那么各部件组成的视图都应该显示在屏幕右方方中心
2.子布局采用Column的布局方式，为列组成。所以我们应该看aligment(x,y)中的x值，子部件都应该紧挨着屏幕的右边
3.主轴为end，代表子部件从上到下排列，最后显示的部件挨着屏幕的底部
4.次轴为start，代表所有部件的左边边缘对齐

运行效果图：

5.png

。

综合demo

class TestWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        children: [
          Container(color: Colors.red,width: 120,height: 120,child: Text('11111'),),
          Stack(
            alignment: Alignment(0,0),
            children: [
              Positioned( child: Container(color: Colors.green,width: 100,height: 100,child: Text('44444'),)),
              Positioned(left: 0 //在stack中，以最大的容器为标准
                  , child: Container(color: Colors.cyanAccent,width: 60,height: 60,child: Text('55555'),)),
              Positioned(right: 0,child: Container(color: Colors.orangeAccent,width: 40,height: 40,child: Text('6666'),)),
            ],
          ),
          Container(color: Colors.yellow,width: 80,height: 100,child: Text('22222'),),
          Container(color: Colors.blue,width: 40,height: 40,child: Text('33333'),),
        ],
      )
    );
  }
}

9.png

总结：Stack可以用来做父视图与子视图的样式部件。