HarmonyOS 页面以弹窗的样式弹出

现在我们登录页面是个半弹窗，里面存在输入框，协议预览，现在以自定义弹窗方式实现，发现协议预览后返回弹窗会关闭，软键盘弹出后页面顶的比较高。

HarmonyOS

superinsect

2024-09-25 12:58:26

浏览

回答 1

待解决

回答 1

按赞同

按时间

put_get

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

自定义弹窗规格问题，无法控制弹窗不被自定义键盘顶起的情况，需要评估下全模态的使用是否满足诉求，不过全模态窗口会被键盘压缩，但不会出现界面被顶出视图外的情况，参考示例：

@Component  
struct LoginPage {  
  build() {  
    Stack({ alignContent: Alignment.Top }) {  
      Image($r(‘app.media.launch_huawei’))  
      .width(‘100%’)  
      .aspectRatio(0.6) // 提前设置号图片宽高比，不然会被父组件高度压缩  
      TextInput()  
        .margin({ top: 100 })  
    }  
    .height(‘100%’).width(‘100%’)  
    .align(Alignment.Top)  
  }  
}  
  
@Builder  
function LoginBuilder() {  
  Column() {  
    LoginPage()  
  }.width(‘100%’)  
  .height(‘100%’)  
}  
  
@Entry  
@Component  
struct Index5701_2 {  
  @State isShow: boolean = false  
  build() {  
    Column() {  
      Button(“transition modal 1”)  
      .onClick(() => {  
        this.isShow = true  
      })  
        .fontSize(20)  
        .margin(10)  
        .bindContentCover(this.isShow, LoginBuilder(), {  
          modalTransition: ModalTransition.ALPHA,  
          backgroundColor: Color.Pink,  
          onAppear: () => {  
            this.isShow = true  
            console.log(“BindContentCover onAppear.”)  
          },  
          onDisappear: () => {  
            this.isShow = false  
            console.log(“BindContentCover onDisappear.”)  
          }  
        })  
    }  
    .justifyContent(FlexAlign.Center)  
    .backgroundColor("#ff49c8ab")  
    .width(‘100%’)  
    .height(‘100%’)  
  }  
}