Layout - Lab.Lawliet

575 字

3 分钟

Layout

2021-11-03

2026-10-12

Flutter

无标签

一、方向部件#

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

1.1 主轴方向调整#

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

1. 默认主轴方向#

1
class MyRowColumn extends StatelessWidget {
2
  @override
3
  Widget build(BuildContext context) {
4
    return Container(
5
      color: Colors.white,
6
      alignment: Alignment(1, 0),// x 对 Row 没影响 y 对 Column 无效
7
      child: Column(
8
        children: [
9
          Container(
10
            child: Icon(Icons.add_a_photo),
11
            color: Colors.red,
12
            alignment: Alignment(0,0),
13
          ),
14
          Container(
15
            child: Icon(Icons.add_alarm),
16
            color: Colors.yellow,
17
            alignment: Alignment(-1,0),
18
          ),
19
          Container(
20
            child: Icon(Icons.add_alert),
21
            color: Colors.green,
22
            alignment: Alignment(1,0),
23
          ),
24
        ],
25
      ),
26
    );
27
  }
28
}

2. MainAxisAlignment.center#

3. MainAxisAlignment.end#

4. MainAxisAlignment.spaceAround#

5. MainAxisAlignment.start#

6. MainAxisAlignment.spaceBetween#

7. MainAxisAlignment.spaceEvenly#

1.3 交叉轴#

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

1
class MyRowColumn extends StatelessWidget {
2
  @override
3
  Widget build(BuildContext context) {
4
    return Container(
5
      color: Colors.brown,
6
      child: Column(
7
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
8
        crossAxisAlignment: CrossAxisAlignment.start,
9
        children: [
10
          Container(
11
            child: Icon(
12
              Icons.add_a_photo,
13
              size: 100,
14
            ),
15
            color: Colors.red,
16
          ),
17
          Container(
18
            child: Icon(
19
              Icons.add_alarm,
20
              size: 50,
21
            ),
22
            color: Colors.yellow,
23
          ),
24
          Container(
25
            child: Icon(
26
              Icons.add_alert,
27
              size: 30,
28
            ),
29
            color: Colors.green,
30
          ),
31
        ],
32
      ),
33
    );
34
  }
35
}

1.4 Stack#

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

1
class MyStack extends StatelessWidget {
2
  const MyStack({Key? key}) : super(key: key);
3

4
  @override
5
  Widget build(BuildContext context) {
6
    return Container(
7
      child: Stack(
8
        children: [
9
          Container(
10
            color: Colors.red,
11
            child: const Icon(
12
            Icons.add_alarm,
13
            size: 200,
14
            color: Colors.green,
15
            ),
16
          ),
17
          Container(
18
            color: Colors.green,
19
            child: const Icon(
20
            Icons.add_a_photo,
21
            size: 100,
22
            color: Colors.yellow,
23
            ),
24
          ),
25
          Container(
26
            color: Colors.black,
27
            child: const Icon(
28
            Icons.add_a_photo_rounded,
29
            size: 60,
30
            color: Colors.blue,
31
            ),
32
          ),
33
        ],
34
      ),
35
    );
36
  }
37
}

我们可以发现，默认都是从左上角开始布局的。如果想要调整子Widget的位置我们该怎么做呢？

2. Positioned#

A [Positioned] widget must be a descendant of a [Stack].

只可用于 Stack

通过 Positioned 我们可以调整子Widget 相对父Widget 的位置

1
Positioned(
2
    right: 12,
3
    top: 12,
4
    child: Container(
5
        color: Colors.black,
6
        child: const Icon(
7
        Icons.add_a_photo_rounded,
8
        size: 60,
9
        color: Colors.blue,
10
        ),
11
    ),
12
),

3. margin#

外边距

1
Container(
2
    margin: const EdgeInsets.only(left: 12),
3
    color: Colors.green,
4
    child: const Icon(
5
    Icons.add_a_photo,
6
    size: 100,
7
    color: Colors.yellow,
8
    ),
9
),

4. padding#

内边距，通过对比可以明显发现红色区域被由内而外的撑大了

1
Container(
2
    padding: const EdgeInsets.all(50),
3
    color: Colors.red,
4
    child: const Icon(
5
    Icons.add_alarm,
6
    size: 200,
7
    color: Colors.green,
8
    ),
9
),

5. Positioned 与 margin 的区别#

从上面的效果可以看出，这里好像 Positioned 与 margin 的效果基本一致。

Positioned
- 尽可用于 Stack
- 相对于父Widget的
margin
- 外边距
- 相对于相邻Widget的

二、宽高比#

用 AspectRatio 可以来指定宽高比

如果同时设定了宽高那么 AspectRatio 就会失效

1
class MyRatio extends StatelessWidget {
2
  const MyRatio({Key? key}) : super(key: key);
3

4
  @override
5
  Widget build(BuildContext context) {
6
    return Container(
7
      color: Colors.white,
8
      child: Container(
9
        color: Colors.red,
10
        width: 100,
11
        child: const AspectRatio(aspectRatio: 1/3),
12
      ),
13
    );
14
  }
15
}