HarmonyOS 关于组件通用属性overlay的显示问题？

Question

在开启组件.expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])下，设置组件的overlay，会有如下问题：

1.通过直接设置文本.overlay('this is overlay',{align: Alignment.Bottom}，文本可以居屏幕底部显示。见下文代码

2.通过自定义builder设置：.overlay(this.customOverlayBuilder(),{align: Alignment.Bottom})，这个无法距底部对齐。见下文代码

这个问题什么导致，有什么解决方案。

//文字设置
@Entry
@Component
struct Page1 {
  build() {
    Column() {

    }
    .overlay('this is overlay',{align: Alignment.Bottom})
    .expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
    .backgroundColor('#f6f7f8')
    .width('100%')
    .height('100%')
  }
}

//自定义builder
@Entry
@Component
struct Page2 {

  @Builder
  customOverlayBuilder() {
    Column() {

    }
    .backgroundColor(Color.Red)
    .width('100%')
    .height(50)
  }

  build() {
    Column() {

    }
    .overlay(this.customOverlayBuilder(),{align: Alignment.Bottom})
    .expandSafeArea([SafeAreaType.SYSTEM],[SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
    .backgroundColor('#f6f7f8')
    .width('100%')
    .height('100%')
  }
}

Answer 1

您可以设置窗口为全屏模式，这样其overlay父组件的100%高度为全屏高度

//EntryAbility.ets
onWindowStageCreate(windowStage: window.WindowStage): void {
    windowStage.loadContent('pages/Index', (err, data) => {
      if (err.code) {
        hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
        return;
      }
      AppStorage.setOrCreate('windowStage',windowStage)
    });
  }

  aboutToAppear(): void {
    const windowStage:window.WindowStage = AppStorage.get('windowStage') as window.WindowStage
    windowStage.getMainWindow((err: BusinessError, windowClass) => {
      windowClass.setWindowLayoutFullScreen(true)
        .then(() => {
          console.info('Succeeded in setting the window layout to full-screen mode.');
        })
        .catch((err: BusinessError) => {
          console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err));
        });
    })
  }