HarmonyOS 带输入框的dialog在键盘弹起后,能让下层页面或弹框的布局不产生位移吗

demo如下,在MyDialog的上面弹出InputDialog,此时键盘弹出时,MyDialog的布局也向上偏移了(如果MyDialog换成普通页面也会有底部控件被顶起),能做到只让最上层的InputDialog被键盘顶起,下层的都固定不动吗?

@CustomDialog
export struct MyDialog {
  controller: CustomDialogController
  inputDialogController = new CustomDialogController({
    builder: InputDialog({}),
    alignment: DialogAlignment.Bottom,
    customStyle: true
  })
  build() {
    Column() {
      Text('点击出弹框').fontSize('18fp').onClick(() => {
        this.inputDialogController.open()
      })
    }.width('100%').height(400).backgroundColor(Color.Gray).justifyContent(FlexAlign.Center)
  }
}
@CustomDialog
export struct InputDialog {
  mController: CustomDialogController
  mRichController = new RichEditorController()
  build() {
    Column() {
      TextArea().defaultFocus(true).enableKeyboardOnFocus(true).margin(20).height(200)
    }.width('100%').backgroundColor(Color.White)
  }
}
  • 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.
HarmonyOS
2024-12-26 15:37:14
浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
aquaa

如果MyDialog换成普通页面,可参考demo:

@Entry
@Component
struct Index {
  homePageInfo: NavPathStack = new NavPathStack();
  aboutToAppear(): void {
  }
  inputDialogController = new CustomDialogController({
    builder: InputDialog({}),
    alignment: DialogAlignment.Bottom,
    customStyle: true
  })
  @Builder
  PagesMap(name: string, params: ESObject) {
    NavDestination() {
      Column() {
        Text("这是第二页")
        Text('点击出弹框').fontSize('18fp').onClick(() => {
          this.inputDialogController.open()
        })
      }.width('60%').height('80%').backgroundColor(Color.Gray)
    }
  }
  build() {
    Navigation(this.homePageInfo) {
      Row() {
        Column() {
          Text("这是首页,点我跳转二级页面")
            .fontSize(50)
            .fontWeight(FontWeight.Bold)
            .onClick(()=> {
              let data: ESObject = {}
              this.homePageInfo.pushPathByName("secondPage", data, true)
            })
        }
        .width('100%')
      }
      .height('100%')
    }.navDestination(this.PagesMap)
  }
  onPageShow(): void {
    // 从第二页返回,没有回调; 首页前后台切换才有
    console.log("回到首页")
  }
  onPageHide(): void {
    // 从第二页返回,没有回调; 首页前后台切换才有
    console.log("回到隐藏")
  }
}
@CustomDialog
export struct MyDialog {
  controller: CustomDialogController
  inputDialogController = new CustomDialogController({
    builder: InputDialog({}),
    alignment: DialogAlignment.Bottom,
    customStyle: true
  })
  build() {
    Column() {
      Text('点击出弹框').fontSize('18fp').onClick(() => {
        this.inputDialogController.open()
      })
    }.width('100%').height(400).backgroundColor(Color.Gray).justifyContent(FlexAlign.Center)
  }
}
@CustomDialog
export struct InputDialog {
  mController: CustomDialogController
  mRichController = new RichEditorController()
  build() {
    Column() {
      TextArea().defaultFocus(true).enableKeyboardOnFocus(true).margin(20).height(200)
    }.width('100%').backgroundColor(Color.White)
  }
}
  • 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.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.

CustomDialog的规格就是完全避让软键盘的,规格如此,一级弹框可使用半模态框不会避让软键盘。

参考demo:

@Entry
@Component struct Index2 {
  @State isShow: boolean = false
  customDialogController = new CustomDialogController({
    builder: CustomFilterDialog(),
    alignment: DialogAlignment.Bottom,
    customStyle: true,
  })
  @Builder
  myBuilder() {
    Column({ space: 300 }) {
      Button("关闭半模态").onClick(() => {
        this.isShow = false
      })
      Button("输入").onClick(() => {
        this.customDialogController.open()
      })
    }
    .expandSafeArea([SafeAreaType.SYSTEM, SafeAreaType.CUTOUT, SafeAreaType.KEYBOARD],
      [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
    .borderRadius(0)
    .width("100%")
    .height('100%')
    .backgroundColor(Color.White)
    .margin({
      top: 30
    })
  }
  build() {
    Column() {
      Button('click me 打开半模态').onClick(() => {
        this.isShow = !this.isShow
      })
    }
    .expandSafeArea([SafeAreaType.SYSTEM, SafeAreaType.CUTOUT, SafeAreaType.KEYBOARD],
      [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
    .bindSheet($$this.isShow, this.myBuilder(), { height: 600, backgroundColor: Color.Transparent, showClose: false })
    .justifyContent(FlexAlign.End)
    .width('100%')
    .height('100%')
  }
}
@CustomDialog
export struct CustomFilterDialog {
  customDialogController: CustomDialogController
  @Builder
  renderPriceRangeInput() {
    Column() {
      TextInput({ placeholder: '最低价' })
        .height('10%')
        .borderRadius(6)
        .backgroundColor(Color.Gray)
        .textAlign(TextAlign.Center)
        .layoutWeight(1)
    }
    .margin({ bottom: 12 })
    .expandSafeArea([SafeAreaType.KEYBOARD])
  }
  build() {
    Column() {
      this.renderPriceRangeInput()
    }.width('100%')
    .height('10%')
  }
}
  • 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.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.

还可以考虑对customDialog内的组件总体设置margin。

分享
微博
QQ
微信
回复
2024-12-26 17:39:52
相关问题
HarmonyOS 自定义键盘弹起遮住输入框
1503浏览 • 1回复 待解决
HarmonyOS输入框dialog示例
763浏览 • 1回复 待解决
HarmonyOS 键盘遮挡输入框
726浏览 • 1回复 待解决
HarmonyOS 输入框屏蔽系统键盘
657浏览 • 1回复 待解决
H5页面输入框自动获焦弹起键盘
2775浏览 • 1回复 待解决
HarmonyOS 如何控制输入框弹出键盘
986浏览 • 1回复 待解决
HarmonyOS webview里输入框键盘覆盖
708浏览 • 1回复 待解决
HarmonyOS web中输入框键盘遮住
733浏览 • 1回复 待解决