层叠布局~

程序员小凯

已于 2024-09-01 19:01:35 修改

阅读量285

点赞数 5

分类专栏： # 组件文章标签： harmonyos DevEco studio 模拟器华为 Deveco Studio

于 2024-08-20 10:04:40 首次发布

本文链接：https://blog.csdn.net/weixin_68705025/article/details/141348593

版权

组件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

文章目录

层叠布局（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)
    }
  }
}

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

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

参数名称	描述
TopStart	顶部起始端
Top	顶部横向居中
TopEnd	顶部尾端（以上都是水平方向最顶端）
Start	起始端纵向居中
Center	横向和纵向居中
End	尾端纵向居中（以上三个呈对角线）
BottomStart	底部起始端
Bottom	底部起始端
BottomEnd	底部起始端（与Top的三个是一上一下）