> 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](https://4193904735-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MI8JgbGh3U6X_oedqkm%2Fuploads%2Fgit-blob-4803efa3d4b282375b03d4c7b892e333e572b5cd%2F01-02.png?alt=media)

**2. MainAxisAlignment.center**

![3](https://4193904735-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MI8JgbGh3U6X_oedqkm%2Fuploads%2Fgit-blob-87361611b26f31ba7b1f76a968901aebbebff662%2F01-03.png?alt=media)

![4](https://4193904735-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MI8JgbGh3U6X_oedqkm%2Fuploads%2Fgit-blob-386d73a747d7cc480b057287a31e6ba8585e0c68%2F01-04.png?alt=media)

**3. MainAxisAlignment.end**

![5](https://4193904735-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MI8JgbGh3U6X_oedqkm%2Fuploads%2Fgit-blob-eb6b208b2c4d1d759534ff9ab1d93ce429b5b63c%2F01-05.png?alt=media)

**4. MainAxisAlignment.spaceAround**

![6](https://4193904735-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MI8JgbGh3U6X_oedqkm%2Fuploads%2Fgit-blob-fdc77705c882fb63e1287aa4429ffa3fa02b3d48%2F01-06.png?alt=media)

**5. MainAxisAlignment.start**

![7](https://4193904735-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MI8JgbGh3U6X_oedqkm%2Fuploads%2Fgit-blob-5176075577dbd773f17755c461dbbf93306ee701%2F01-07.png?alt=media)

**6. MainAxisAlignment.spaceBetween**

![8](https://4193904735-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MI8JgbGh3U6X_oedqkm%2Fuploads%2Fgit-blob-3f0473d0249de74b0552211c26ace130808dd029%2F01-08.png?alt=media)

**7. MainAxisAlignment.spaceEvenly**

![9](https://4193904735-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MI8JgbGh3U6X_oedqkm%2Fuploads%2Fgit-blob-9f741e70aa626f53a5359273f9c1fa97dac2ba62%2F01-09.png?alt=media)

#### 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](https://4193904735-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MI8JgbGh3U6X_oedqkm%2Fuploads%2Fgit-blob-8806be4333cc8fef9dd8a66c9f2ecbc29e9448f9%2F02-01.png?alt=media)

#### 1.4 Stack

![02](https://4193904735-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MI8JgbGh3U6X_oedqkm%2Fuploads%2Fgit-blob-926eaef3c298f82d8eadc4c2fbc422e6659975f0%2F02-02.png?alt=media)

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

```
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](https://4193904735-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MI8JgbGh3U6X_oedqkm%2Fuploads%2Fgit-blob-c39f1b3a6493c0e3f528c06b51f5ad4bc6626af9%2F02-03.png?alt=media)

```
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](https://4193904735-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MI8JgbGh3U6X_oedqkm%2Fuploads%2Fgit-blob-61cb3c2e5344a45667c9a75277134b7dcf1c5b09%2F02-04.png?alt=media)

```
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](https://4193904735-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MI8JgbGh3U6X_oedqkm%2Fuploads%2Fgit-blob-6ddeef90d964b76fd6590295a5ad7f022a1b9e36%2F02-05.png?alt=media)

```
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](https://4193904735-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MI8JgbGh3U6X_oedqkm%2Fuploads%2Fgit-blob-3d24e4b2e35bd83dfdbee3bf1052292772cfb9b7%2F02-06.png?alt=media)

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