基于ArkUI的这种布局该怎么实现？

Question

帮朋友提问：基于ArkUI的这种布局该怎么实现？

本文参与了思否 HarmonyOS 技术问答马拉松，欢迎正在阅读的你也加入。

Answer 1

这个很简单的布局，只有三个控件：

1. 中间一个水平居中，垂直居中偏上一点的文字图片
2. 下面一个水平居中，距离底部间距固定的文字控件
3. 在文字控件上部，一个固定间距的图片控件

如果思维上还是优先使用线性布局的话，会发现不太好实现，换做层叠Stack布局就非常简单。
简单的实现：

  build() {
    Stack() {
      Column() {
        Image($r("app.media.launch_slogan"))
          .size({width: 31, height:400})
          .offset({y: -50})
      }
      .height('100%')
      .justifyContent(FlexAlign.Center)
      Column() {
        Image($r("app.media.logo"))
          .size({width: 67, height: 22})
          .margin({bottom: 8})
        Text($r("app.string.launch_ipv6"))
          .font({size: 10})
          .fontColor("#BBBBBB")
      }
      .margin({bottom: 10})
    }
    .alignContent(Alignment.Bottom)
    .size({width: '100%'})
  }