HarmonyOS 使用相对布局如何让组件不超出页面

如下述代码，如何让id为Test的组件铺满底部剩余空间并且不超出屏幕。

build() {
  RelativeContainer() {
    Text(this.message)
      .id('HelloWorld')
      .fontSize(50)
      .fontWeight(FontWeight.Bold)
      .alignRules({
        center: { anchor: '__container__', align: VerticalAlign.Center },
        middle: { anchor: '__container__', align: HorizontalAlign.Center }
      })
    Text("sdsdfadfa\n sdsdfadfa\n sdsdfadfa\n sdsdfadfa\n sdsdfadfa\n sdsdfadfa\n sdsdfadfa\n sdsdfadfa\n sdsdfadfa\n sdsdfadfa\nsdsdfadfa\n sdsdfadfa\n sdsdfadfa\n sdsdfadfa\n sdsdfadfa\n sdsdfadfa\n sdsdfadfa\n sdsdfadfa\n sdsdfadfa\n sdsdfadfa\n sdsdfadfa\n sdsdfadfa\n sdsdfadfa\n sdsdfadfa\n sdsdfadfa\n")
      .alignRules({
        top: { anchor: "HelloWorld", align: VerticalAlign.Bottom },
        bottom: { anchor: "__container__", align: VerticalAlign.Bottom }
      }).padding({ bottom: 20 }).id("Test")
  }
  .height('100%')
  .width('100%')
}

HarmonyOS

shlp

1天前

浏览

回答 1

待解决

回答 1

按赞同

按时间

zxjiu

可以尝试使用Stack布局结合Position和zindex属性来实现。Stack布局允许子元素沿垂直于屏幕的方向堆叠，通过设置子元素的Position可以精确指定其位置，zindex用于控制元素的层级，参考示例如下：

@Entry @Component struct DynamicLayoutExample {
  @State isTransparent : boolean = false; // 用于控制 Test 布局是否透明

  build() {
    Stack() {
      Text('1234')
        .id('HelloWorld')
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
        .position({x : 0, y : 0}) // 初始位置在左上角
        .zIndex(1)                // 设置层级，确保在 Test 布局之上（当 Test 不透明时）
        .onClick(() = > {
          this.isTransparent = !this.isTransparent; // 点击时切换 Test 布局的透明状态
        });

      Text("sdsdfadfa\n sdsdfadfa\n sdsdfadfa\n...")
        .alignRules({
          top : {anchor : "__container__", align : VerticalAlign.Top},
          bottom : {anchor : "__container__", align : VerticalAlign.Bottom}
        })
        .padding({bottom : 20})
        .id("Test")
        .opacity(this.isTransparent ? 0 : 1); // 根据 isTransparent 状态设置透明度
    }
    .width('100%').height('100%');
  }
}