鸿蒙前端-1. 层叠效果

news2024/10/24 11:31:06

代码Stack（{alignContent：Alignment.Center}）{
Item1（）
Item2（）
Item3（）} 默认是居中对齐，后面的Item的优先级比前面的要高。
特点：代码简洁，效率更高（绝对定位来说的）

“设置浮动位置”指的是在界面布局中调整某个组件（在你的例子中是按钮）相对于其父容器的位置。在你的代码中，使用 .position({ x: 70, y: 100 }) 来设置按钮的位置。这意味着按钮会在父容器（Stack）的坐标系中，以 x=70 和 y=100 的位置来展示。

下面是个例子你可以试试：

@Entry
@Component
struct CardWithButton {
  build() {
    Stack({ alignContent: Alignment.Center }) {
      // 卡片层
      Divider()
        .width(200)
        .height(150)
        .backgroundColor(Color.Orange)

      // 浮动按钮
      Button('Button')

        .width(70)
        .height(30)
        .backgroundColor(Color.Pink)
        .position({ x: 70, y: 100 })  // 设置浮动位置
        .borderRadius(10) // 圆形按钮
    }
  }
}

在这里插入图片描述

@Entry
@Component
struct StackExample {
build() {
Stack({ alignContent: Alignment.Center }) {
// 第一层矩形
Divider()
.width(200)
.height(100)
.backgroundColor(Color.Yellow)

  // 第二层矩形
 Divider()
   .width(180)
    .height(90)
    .backgroundColor(Color.Green)

  // 第三层矩形
  Divider()
    .width(160)
    .height(80)
    .backgroundColor(Color.Blue)
}

}
}

在这里插入图片描述


@Entry //页面的入口文件，一个文件只能有一个
@Component  //  组件
struct Index // 这个是index是 组件的名字， 只有写在第一个component里面的内容的首内容，下面写的所有都是第一个component的子组件
{
  @State message: string = 'Hello World？？';
  // 用于声明全局(可修改的)变量
  build() {
    //build只能有一个根元素，一个根节点，row和colum可以嵌套

Stack({
  alignContent:Alignment.TopEnd
}){

Text("第一个")
  .width(250)
  .height(250)
  .backgroundColor(Color.Green)
  //可以手动调层级  .zIndex(3)
  .padding(50)

  Text("第二个")
    .width(150)
    .height(150)
    .backgroundColor(Color.Blue)

  //可以手动调层级  .zIndex(5)
  Text("第三个")
    .width(50)
    .height(50)
    .backgroundColor(Color.Red)
   //可以手动调层级 .zIndex(3)
}

.width(300)
    .height(600)
    .backgroundColor(Color.Pink)


  }
}

在这里插入图片描述