# 5.3：层叠布局容器（Stack）

ArkUI开发框架提了堆叠容器组件 Stack ，它的布局方式是把子组件按照设置的对齐方式顺序依次堆叠，后一个子组件覆盖在前一个子组件上边。

# 5.3.1：Stack定义介绍

interface StackInterface {
  (value?: { alignContent?: Alignment }): StackAttribute;
}

1
2
3

alignContent：设置子组件的对其方式， Alignment 定义了以下 9 种对齐方式：

TopStart：子组件在 Stack 内靠左上角对齐，简单样例如下所示：

@Entry @Component struct ComponentTest {

  build() {
    Stack({alignContent: Alignment.TopStart}) {
      Text('Text1')
        .width(200)
        .height(180)
        .textAlign(TextAlign.End)
        .backgroundColor("#aabbcc")

      Text('Text2')
        .width(130)
        .height(100)
        .textAlign(TextAlign.End)
        .backgroundColor('#bbccaa')

      Text('Text3')       // 被遮挡住了
        .backgroundColor('#ccaabb')

      Text('Text4')
        .width(60)
        .height(45)
        .textAlign(TextAlign.End)
        .backgroundColor('#abcabc')
    }
    .backgroundColor(Color.Pink)
    .width("100%")
    .height('200')
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

样例运行结果如下图所示：

Top：设置子组件在 Stack 内靠顶部水平居中对齐，简单样例如下所示：

@Entry @Component struct ComponentTest {

  build() {
    Stack({alignContent: Alignment.Top}) {
      Text('Text1')
        .width(200)
        .height(180)
        .textAlign(TextAlign.End)
        .backgroundColor("#aabbcc")

      Text('Text2')
        .width(130)
        .height(100)
        .textAlign(TextAlign.End)
        .backgroundColor('#bbccaa')

      Text('Text3')       // 被遮挡住了
        .backgroundColor('#ccaabb')

      Text('Text4')
        .width(60)
        .height(45)
        .textAlign(TextAlign.End)
        .backgroundColor('#abcabc')
    }
    .backgroundColor(Color.Pink)
    .width("100%")
    .height('200')
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

样例运行结果如下图所示：

TopEnd：设置子组件在 Stack 内部靠右上角对齐，简单样例如下所示：

@Entry @Component struct ComponentTest {

  build() {
    Stack({alignContent: Alignment.TopEnd}) {
      Text('Text1')
        .width(200)
        .height(180)
        .textAlign(TextAlign.Start)
        .backgroundColor("#aabbcc")

      Text('Text2')
        .width(130)
        .height(100)
        .textAlign(TextAlign.Start)
        .backgroundColor('#bbccaa')

      Text('Text3')       // 被遮挡住了
        .backgroundColor('#ccaabb')

      Text('Text4')
        .width(60)
        .height(45)
        .textAlign(TextAlign.Start)
        .backgroundColor('#abcabc')
    }
    .backgroundColor(Color.Pink)
    .width("100%")
    .height('200')
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

样例运行结果如下图所示：

Start：子组件靠 Stack 左边侧竖直居中对齐，简单样例如下所示：

@Entry @Component struct ComponentTest {

  build() {
    Stack({alignContent: Alignment.Start}) {
      Text('Text1')
        .width(200)
        .height(180)
        .textAlign(TextAlign.End)
        .backgroundColor("#aabbcc")

      Text('Text2')
        .width(130)
        .height(100)
        .textAlign(TextAlign.End)
        .backgroundColor('#bbccaa')

      Text('Text3')       // 被遮挡住了
        .backgroundColor('#ccaabb')

      Text('Text4')
        .width(60)
        .height(45)
        .textAlign(TextAlign.End)
        .backgroundColor('#abcabc')
    }
    .backgroundColor(Color.Pink)
    .width("100%")
    .height('200')
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

样例运行结果如下图所示：

Center（默认值）：设置子组件居中对齐，简单样例如下所示：

@Entry @Component struct ComponentTest {

  build() {
    Stack({alignContent: Alignment.Center}) {
      Text('Text1')
        .width(200)
        .height(180)
        .backgroundColor("#aabbcc")

      Text('Text2')
        .width(130)
        .height(100)
        .backgroundColor('#bbccaa')

      Text('Text3')       // 被遮挡住了
        .backgroundColor('#ccaabb')

      Text('Text4')
        .width(60)
        .height(45)
        .backgroundColor('#abcabc')
    }
    .backgroundColor(Color.Pink)
    .width("100%")
    .height('200')
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

样例运行结果如下图所示：

End：设置子组件靠右竖直居中对齐，简单样例如下所示：

@Entry @Component struct ComponentTest {

  build() {
    Stack({alignContent: Alignment.End}) {
      Text('Text1')
        .width(200)
        .height(180)
        .backgroundColor("#aabbcc")

      Text('Text2')
        .width(130)
        .height(100)
        .backgroundColor('#bbccaa')

      Text('Text3')       // 被遮挡住了
        .backgroundColor('#ccaabb')

      Text('Text4')
        .width(60)
        .height(45)
        .backgroundColor('#abcabc')
    }
    .backgroundColor(Color.Pink)
    .width("100%")
    .height('200')
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

样例运行结果如下图所示：

BottomStart：设置子组件左下角对齐，简单样例如下所示：

@Entry @Component struct ComponentTest {

  build() {
    Stack({alignContent: Alignment.BottomStart}) {
      Text('Text1')
        .width(200)
        .height(180)
        .textAlign(TextAlign.End)
        .backgroundColor("#aabbcc")

      Text('Text2')
        .width(130)
        .height(100)
        .textAlign(TextAlign.End)
        .backgroundColor('#bbccaa')

      Text('Text3')       // 被遮挡住了
        .backgroundColor('#ccaabb')

      Text('Text4')
        .width(60)
        .height(45)
        .textAlign(TextAlign.End)
        .backgroundColor('#abcabc')
    }
    .backgroundColor(Color.Pink)
    .width("100%")
    .height('200')
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

样例运行结果如下图所示：

Bottom：设置子组件底部水平居中对齐，简单样例如下所示：

@Entry @Component struct ComponentTest {

  build() {
    Stack({alignContent: Alignment.Bottom}) {
      Text('Text1')
        .width(200)
        .height(180)
          // .textAlign(TextAlign.End)
        .backgroundColor("#aabbcc")

      Text('Text2')
        .width(130)
        .height(100)
          // .textAlign(TextAlign.End)
        .backgroundColor('#bbccaa')

      Text('Text3')       // 被遮挡住了
        .backgroundColor('#ccaabb')

      Text('Text4')
        .width(60)
        .height(45)
          // .textAlign(TextAlign.End)
        .backgroundColor('#abcabc')
    }
    .backgroundColor(Color.Pink)
    .width("100%")
    .height('200')
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

样例运行结果如下图所示：

BottomEnd：设置子组件右下角对齐，简单样例如下所示：

@Entry @Component struct ComponentTest {

  build() {
    Stack({alignContent: Alignment.BottomEnd}) {
      Text('Text1')
        .width(200)
        .height(180)
          // .textAlign(TextAlign.End)
        .backgroundColor("#aabbcc")

      Text('Text2')
        .width(130)
        .height(100)
          // .textAlign(TextAlign.End)
        .backgroundColor('#bbccaa')

      Text('Text3')       // 被遮挡住了
        .backgroundColor('#ccaabb')

      Text('Text4')
        .width(60)
        .height(45)
          // .textAlign(TextAlign.End)
        .backgroundColor('#abcabc')
    }
    .backgroundColor(Color.Pink)
    .width("100%")
    .height('200')
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

样例运行结果如下图所示：

📢：根据以上示例可知： Stack 组件层叠式布局，尺寸较小的布局会有被遮挡的风险，读者在布局组件的时候需要注意一下。

# 5.3.2：Stack属性介绍

declare class StackAttribute extends CommonMethod<StackAttribute> {
  alignContent(value: Alignment): StackAttribute;
}

1
2
3

alignContent：设置子组件的对齐方式， Alignment 的讲解同上，这里就不再介绍了。

# 5.3.3：小结

本节简单介绍了 Stack 布局特性：堆叠式，它的使用很简单，唯一需要读者注意的是小的子组件可能出现会被遮挡的情况，熟练该容器组件后就可以构建相对比较复杂的UI了。

← 5.2：弹性布局容器（Flex） 5.4：格栅布局容器（GridContainer） →

请作者喝杯咖啡

欢迎加入鸿蒙技术交流群：695438501

津公网安备 12011402001367号

津ICP备2020008934号-2

中央网信办互联网违法和不良信息举报中心

天津市互联网违法和不良信息举报中心