文章目录



层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。层叠布局通过Stack容器组件实现位置的固定定位与层叠，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素，子元素可以叠加，也可以设置位置。 


@Entry
@Component
struct Index{

  build() {

    Column(){
      Stack(){
        Column(){}.width("90%").height("100%").backgroundColor(Color.Yellow)
        Text('哈哈哈').width("60%").height("60%").backgroundColor(Color.Green).fontColor(Color.White)
        Button("点我啊").width("30%").height("20%").backgroundColor(Color.Gray).fontSize(20)
      }.width("100%").height(200)
    }
  }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.

效果图：

如图示，分析我们的代码，从最外层到最里层的容器，我的宽度和高度都在逐渐减小，他是一个层叠到当前容器的外层容器上。

层叠布局~_harmonyos

如果我们想要文本变换位置的话，可以添加align(Alignment.参数)
参数：

参数名称

描述

TopStart

顶部起始端

Top

顶部横向居中

TopEnd

顶部尾端（以上都是水平方向最顶端）

Start

起始端纵向居中

Center

横向和纵向居中

End

尾端纵向居中（以上三个呈对角线）

BottomStart

底部起始端

Bottom

底部起始端

BottomEnd

底部起始端（与Top的三个是一上一下）