HarmonyOS 如何让自定义弹窗不被顶出去

自定义弹窗仅适用于简单提示场景，不能替代页面使用。由于弹窗存在完全避让输入法行为，即在软键盘弹出时，会自动向上抬起软键盘高度，因此如果弹窗高度过大时，可能会导致部分区域不可见。

建议使用模态框实现如果页面路由使用Navigation实现，可以将dialog改为一个navDestination，将mode类型设置为NavDestination.DIALOG即可达到dialog的效果，其通过顶高整体的方式使得TextInput不会被遮挡，参考如下代码：

@Component
struct Dialog01 {
  @Consume('pageInfos') pageInfos: NavPathStack;

  build() {
    NavDestination() {
      Stack() {
        Column()
          .width('100%')
          .height('100%')
          .backgroundColor(Color.Gray)
          .opacity(0.1)
          .onClick(() => {
            this.pageInfos.pop();
          })
        Column() {
          Text('登陆asdas').fontSize(15)
          TextInput({ placeholder: "请输入手机号" }).margin(5)
          TextInput({ placeholder: "请输入验证码" }).margin(5)
          Button("登录")
        }
        .padding(10)
        .width(300)
        .height(200)
        .backgroundColor(Color.White)
        .borderRadius(10)
      }
    }.hideTitleBar(true).mode(NavDestinationMode.DIALOG)
  }
}

@Entry
@Component
struct Index {
  @Provide('NavPathStack') pageInfos: NavPathStack = new NavPathStack()
  isLogin: boolean = false;

  @Builder
  PagesMap(name: string) {
    Dialog01()
  }

  build() {
    Navigation(this.pageInfos) {
      Button('点击登录').width('80%').onClick(() => {
        this.pageInfos.pushPathByName('Dialog01', '');
      })
    }.mode(NavigationMode.Stack).titleMode(NavigationTitleMode.Mini).title('主页').navDestination(this.PagesMap)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.