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)
  }
}
HarmonyOS
8天前
浏览
收藏 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)
  }
}

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%')
  }
}

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

分享
微博
QQ
微信
回复
8天前
相关问题
HarmonyOS输入框dialog示例
84浏览 • 1回复 待解决
HarmonyOS 键盘遮挡输入框
71浏览 • 1回复 待解决
H5页面输入框自动获焦弹起键盘
1952浏览 • 1回复 待解决
HarmonyOS 如何控制输入框弹出键盘
115浏览 • 1回复 待解决
HarmonyOS web中输入框键盘遮住
99浏览 • 1回复 待解决