HarmonyOS 在CustomDialogController 添加 Search 组件,当Search 组件光标选中时候,软键盘会直接将该界面顶出屏幕

HarmonyOS
5h前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
fox280

参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-sheet-transition-V5#ZH-CN_TOPIC_0000001884917674__bindsheet

可以通过半模态页面替换自定义弹窗,demo如下:

@Entry
@Component
struct Index {
  @State message: string = '点击弹框';
  scroller: Scroller = new Scroller()
  private arr: number[] = [0, 1, 2, 3, 4, 5]
  controllera: TextInputController = new TextInputController()
  @State flag: boolean = false;
  @State TextTest: string = ''
  @State TextTest1: string = ''
  @State screenHeight: number = 0;
  // 半模态转场显示隐藏控制
  @State isShowSheet: boolean = false;

  // 通过@Builder构建半模态展示界面
  @Builder
  mySheet() {
    // 使用Stack容器来实现Navigation导航栏的固定
    Stack({ alignContent: Alignment.TopStart }) {
      Scroll(this.scroller) {
        Column() {
          TextInput({ placeholder: 'search...', controller: this.controllera })
            // 默认设置当前组件不能获焦
            .focusable(this.flag)
            .width('90%')
            .height(40)
            .backgroundColor('#FFFFFF')
            .margin({ top: 8, bottom: 20 })
              // 设置点击事件重新获取焦点
            .onClick(() => {
              this.flag = true
              this.TextTest1 = '1'
            })
          ForEach(this.arr, (item:number) => {
            Text(item.toString())
              .width('90%')
              .height(150)
              .backgroundColor(0xFFFFFF)
              .borderRadius(15)
              .fontSize(16)
              .textAlign(TextAlign.Center)
              .margin({ top: 10 })
          }, (item:number) => item.toString())

          // 给键盘空出的高度,内容不为空时会顶起页面的底部内容显示
          Text(this.TextTest)
            .lineHeight(300)
            .fontColor('#DCDCDC')
          Text(this.TextTest1)
            .lineHeight(300)
            .fontColor('#DCDCDC')
        }.width('100%')
      }
      // 上间距根据导航栏高度来设置
      .margin({top: 110})
      .scrollable(ScrollDirection.Vertical)
      .scrollBar(BarState.On)
      .scrollBarColor(Color.Gray)
      .scrollBarWidth(0)
      .onScroll((xOffset: number, yOffset: number) => {
        console.info(xOffset + ' ' + yOffset)
      })
      // Stack容器内的第二个子组件,Navigation会覆盖Scroll容器
      Navigation() {
      }
      .title('导航栏标题')
      .backgroundColor(Color.Yellow)
      .height(110)
      .titleMode(NavigationTitleMode.Full)
      .hideTitleBar(false)
      .hideToolBar(false)
      // 这里的按钮是初步思想,由于没有找到监听键盘收起的事件,因此在键盘弹出时可以点击按钮,失去焦点的同时设置文本内容为空,但考虑到用户不会通过别的方式来收起键盘,因此这种方式就摒弃了,思路可供参考。
      Button('键盘收起')
        .onClick(() => {
          this.TextTest1 = ''
          this.flag = false
        })
        .margin({top:10, left: 20})
    }.width('100%').height('100%').backgroundColor(0xDCDCDC)
  }


  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
          .bindSheet(this.isShowSheet, this.mySheet(), {
            showClose:false,
            height: 700,
            dragBar: false,
            onDisappear: () => {
              this.isShowSheet = !this.isShowSheet;
            }
          })
          .onClick(() => {
            this.isShowSheet = !this.isShowSheet;
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}
分享
微博
QQ
微信
回复
2h前
相关问题
HarmonyOS 弹窗不避让软键盘
571浏览 • 1回复 待解决
HarmonyOS 如何代码控制软键盘弹出?
456浏览 • 1回复 待解决
HarmonyOS如何代码收起软键盘
496浏览 • 1回复 待解决
如何判断软键盘是否弹出
2122浏览 • 1回复 待解决
关于软键盘弹出遮挡问题
1252浏览 • 1回复 待解决
如何主动收起软键盘
345浏览 • 1回复 待解决
HarmonyOS 关于软键盘的相关问题
453浏览 • 0回复 待解决
HarmonyOS 如何获取软键盘的高度?
744浏览 • 1回复 待解决
API8 怎么隐藏软键盘
2545浏览 • 1回复 待解决
CustomDialog与软键盘的问题
425浏览 • 1回复 待解决
HarmonyOS如何获取系统软键盘的高度?
496浏览 • 1回复 待解决