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

Question

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

Answer 1

参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-refere...
可以通过半模态页面替换自定义弹窗，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%') 
  } 
}