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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://ryukiedev.gitbook.io/wiki/flutter/02.layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.