HarmonyOS 鸿蒙Next：多个TextInput，如何让键盘一直出现在屏幕中

可以通过 event.keepEditableState() 保持键盘编辑状态。

参考代码：

@Entry
@Component
struct Page {
  build() {
    Column() {
      TextInput().width('100%').height(60).backgroundColor(Color.Blue)
        .enterKeyType(EnterKeyType.Next)
        .onSubmit((enterKey: EnterKeyType, event: SubmitEvent)=>{
          focusControl.requestFocus('input')
          event.keepEditableState()
        })
      TextInput().width('100%').height(60).backgroundColor(Color.Blue)
        .id('input')
        .margin({top:50})
    }
    .justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Start)
    .width('100%')
    .height('100%')
  }
}

相关链接：TextInput-文本与输入-ArkTS组件-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者

原来不用 event.keepEditableState() 的时候输入框不会被软键盘挡住么？

用了两个步骤来尝试解决：

1. 通过 onSubmit 中使用 this.scroller.scrollToIndex(this.selectIndex+1,true); 方法让 scroller 滚动到下一个键盘的位置。
2. 通过监听键盘高度，修改 List 的 .margin({ bottom: this.keyboardHeight }) 距离底部一个键盘的高度，使输入框不会被键盘遮挡。

aboutToAppear() {
  let windowClass: window.Window = (AppStorage.get('windowStage') as window.WindowStage).getMainWindowSync()
  windowClass.on('keyboardHeightChange', (data) => {
    this.keyboardHeight = px2vp(data)
  });
}

可以新建项目将代码替换来验证代码, 下面是完整代码：

1. 在 EntryAbility 中将 onWindowStageCreate(windowStage: window.WindowStage): void 方法替换为：

onWindowStageCreate(windowStage: window.WindowStage): void {
  // Main window is created, set main page for this ability
  hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
  windowStage.loadContent('pages/Index', (err) => {
    if (err.code) {
      hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
      return;
    }
    hilog.info(0x0000, 'testTag', 'Succeeded in loading the content.');
    AppStorage.setOrCreate('windowStage',windowStage);
  });
}

1. 将 Index.ets 中代码替换为：

import { window } from '@kit.ArkUI'

@Entry
@Component
struct ListExample {
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
  selectIndex:number = 0
  scroller: Scroller = new Scroller()
  @State keyboardHeight:number = 0

  aboutToAppear() {
    let windowClass: window.Window = (AppStorage.get('windowStage') as window.WindowStage).getMainWindowSync()
    windowClass.on('keyboardHeightChange', (data) => {
      this.keyboardHeight = px2vp(data)
    });
  }

  build() {
    Column() {
      List({ space: 20, initialIndex: 0, scroller: this.scroller }) {
        ForEach(this.arr, (item: number) => {
          ListItem() {
            Column(){
              Text('a' + item + '-' + this.keyboardHeight)
                .width('100%').height(100).fontSize(16)
                .textAlign(TextAlign.Center).borderRadius(10).backgroundColor(0xFFFFFF)
              TextInput().width('100%').height(80)
                .margin({top:10})
                .id('a'+item)
                .onFocus(()=>{
                  console.log('focus: a'+item)
                  this.selectIndex = item
                  console.log('aaa' + this.selectIndex)
                })
                .onSubmit((enterKey: EnterKeyType, event: SubmitEvent)=>{
                  focusControl.requestFocus('a'+(this.selectIndex+1));
                  this.scroller.scrollToIndex(this.selectIndex+1,true);
                  event.keepEditableState();
                })
            }
          }
        }, (item: string) => item)
      }
      .listDirection(Axis.Vertical) // 排列方向
      .scrollBar(BarState.Off)
      .divider({ strokeWidth: 2, color: 0xFFFFFF, startMargin: 20, endMargin: 20 }) // 每行之间的分界线
      .edgeEffect(EdgeEffect.Spring) // 边缘效果设置为Spring
      .width('90%')
      .margin({ bottom: this.keyboardHeight })
    }
    .width('100%')
    .height('100%')
    .backgroundColor(0xDCDCDC)
    .padding({ top: 5 })
  }
}