# 5.3:层叠布局容器(Stack)

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

# 5.3.1:Stack定义介绍

interface StackInterface {
  (value?: { alignContent?: Alignment }): StackAttribute;
}
1
2
3
  • alignContent:设置子组件的对其方式, Alignment 定义了以下 9 种对齐方式:

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

      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

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

      5_3_1
    • Top:设置子组件在 Stack 内靠顶部水平居中对齐,简单样例如下所示:

      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

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

      5_3_2
    • TopEnd:设置子组件在 Stack 内部靠右上角对齐,简单样例如下所示:

      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

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

      5_3_3
    • Start:子组件靠 Stack 左边侧竖直居中对齐,简单样例如下所示:

      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

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

      5_3_4
    • Center(默认值):设置子组件居中对齐,简单样例如下所示:

      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

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

      5_3_5
    • End:设置子组件靠右竖直居中对齐,简单样例如下所示:

      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

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

      5_3_6
    • BottomStart:设置子组件左下角对齐,简单样例如下所示:

      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

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

      5_3_7
    • Bottom:设置子组件底部水平居中对齐,简单样例如下所示:

      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

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

      5_3_8
    • BottomEnd:设置子组件右下角对齐,简单样例如下所示:

      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

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

      5_3_9

    📢:根据以上示例可知: 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了。

(adsbygoogle = window.adsbygoogle || []).push({});
请作者喝杯咖啡

津公网安备 12011402001367号

津ICP备2020008934号-2

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

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