> For the complete documentation index, see [llms.txt](https://ryukiedev.gitbook.io/wiki/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ryukiedev.gitbook.io/wiki/flutter/02.layout.md).

# 02.Layout

### 一、 方向部件

* Row
  * 水平方向
  * 主轴方向：向右
* Column
  * 垂直方向
  * 主轴方向：向下
* Stack
  * 屏幕内外方向
  * 主轴方向：向屏幕外

#### 1.1 主轴方向调整

`Row` 和 `Column` 可以通过调整主轴方向达到不同布局效果。

**1. 默认主轴方向**

```dart
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](/files/on7MLuRXJdkwVsAy4ovQ)

**2. MainAxisAlignment.center**

![3](/files/uzDEMV6UrXHsGPmDcSnq)

![4](/files/2aR6GTemRU9rqTkAi6r6)

**3. MainAxisAlignment.end**

![5](/files/YCqX5cJunJWXzWR5HTHx)

**4. MainAxisAlignment.spaceAround**

![6](/files/DcZ8EwvQhFwW0CAcYbsr)

**5. MainAxisAlignment.start**

![7](/files/T71D23mpjJLWJCfy6FNH)

**6. MainAxisAlignment.spaceBetween**

![8](/files/nSKFfAO8vPTwd2wRhulW)

**7. MainAxisAlignment.spaceEvenly**

![9](/files/JorLaZIz4Tim31jZKUlO)

#### 1.3 交叉轴

交叉轴 是垂直与主轴方向的

```dart
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](/files/6lj5o9eEwOMRpM0prjF1)

#### 1.4 Stack

![02](/files/XxWKekkVpxJqQARk9qqd)

如下布局我们可以得到如图效果

```
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](/files/DOb6DfU9vMgi0L0OmqBt)

```
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](/files/YbT6HbMc1griVNEUsj4Q)

```
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](/files/sGl5td7YMzA0Udn1gM5U)

```
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](/files/y6S3NqqW0hsNNJEpOtT3)

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