02.Layout

一、 方向部件
Row
水平方向
主轴方向：向右
Column
垂直方向
主轴方向：向下
Stack
屏幕内外方向
主轴方向：向屏幕外
1.1 主轴方向调整
Row 和 Column 可以通过调整主轴方向达到不同布局效果。
1. 默认主轴方向
class MyRowColumn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      alignment: Alignment(1, 0),// x 对 Row 没影响 y 对 Column 无效
      child: Column(
        children: [
          Container(
            child: Icon(Icons.add_a_photo),
            color: Colors.red,
            alignment: Alignment(0,0),
          ),
          Container(
            child: Icon(Icons.add_alarm),
            color: Colors.yellow,
            alignment: Alignment(-1,0),
          ),
          Container(
            child: Icon(Icons.add_alert),
            color: Colors.green,
            alignment: Alignment(1,0),
          ),
        ],
      ),
    );
  }
}
2
2. MainAxisAlignment.center
3
4
3. MainAxisAlignment.end
5
4. MainAxisAlignment.spaceAround
6
5. MainAxisAlignment.start
7
6. MainAxisAlignment.spaceBetween
8
7. MainAxisAlignment.spaceEvenly
9
1.3 交叉轴
交叉轴 是垂直与主轴方向的
class MyRowColumn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.brown,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            child: Icon(
              Icons.add_a_photo,
              size: 100,
            ),
            color: Colors.red,
          ),
          Container(
            child: Icon(
              Icons.add_alarm,
              size: 50,
            ),
            color: Colors.yellow,
          ),
          Container(
            child: Icon(
              Icons.add_alert,
              size: 30,
            ),
            color: Colors.green,
          ),
        ],
      ),
    );
  }
}
1
1.4 Stack
02
如下布局我们可以得到如图效果
class MyStack extends StatelessWidget {
  const MyStack({Key? key}) : super(key: key);
​
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Stack(
        children: [
          Container(
            color: Colors.red,
            child: const Icon(
            Icons.add_alarm,
            size: 200,
            color: Colors.green,
            ),
          ),
          Container(
            color: Colors.green,
            child: const Icon(
            Icons.add_a_photo,
            size: 100,
            color: Colors.yellow,
            ),
          ),
          Container(
            color: Colors.black,
            child: const Icon(
            Icons.add_a_photo_rounded,
            size: 60,
            color: Colors.blue,
            ),
          ),
        ],
      ),
    );
  }
}
1. 子Widget布局调整
我们可以发现，默认都是从左上角开始布局的。如果想要调整子Widget的位置我们该怎么做呢？
2. Positioned
A [Positioned] widget must be a descendant of a [Stack].
只可用于 Stack
通过 Positioned 我们可以调整 子Widget 相对 父Widget 的位置
3
Positioned(
    right: 12,
    top: 12,
    child: Container(
        color: Colors.black,
        child: const Icon(
        Icons.add_a_photo_rounded,
        size: 60,
        color: Colors.blue,
        ),
    ),
),
3. margin
外边距
4
Container(
    margin: const EdgeInsets.only(left: 12),
    color: Colors.green,
    child: const Icon(
    Icons.add_a_photo,
    size: 100,
    color: Colors.yellow,
    ),
),
4. padding
内边距，通过对比可以明显发现红色区域被由内而外的撑大了
5
Container(
    padding: const EdgeInsets.all(50),
    color: Colors.red,
    child: const Icon(
    Icons.add_alarm,
    size: 200,
    color: Colors.green,
    ),
),
5. Positioned 与 margin 的区别
从上面的效果可以看出，这里好像 Positioned 与 margin 的效果基本一致。
Positioned
尽可用于 Stack
相对于父Widget的
margin
外边距
相对于相邻Widget的
二、 宽高比
用 AspectRatio 可以来指定 宽高比
如果同时设定了宽高那么 AspectRatio 就会失效
6
class MyRatio extends StatelessWidget {
  const MyRatio({Key? key}) : super(key: key);
​
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Container(
        color: Colors.red,
        width: 100,
        child: const AspectRatio(aspectRatio: 1/3),
      ),
    );
  }
}