HarmonyOS 显示输入法时,底部列表同时滚动问题?

显示输入框时,同时显示输入法,这时,输入框和底部列表一起滚动,能否输入框跟随滚动,底部列表固定。

阅读 520
1 个回答

可在list上加.expandSafeArea([SafeAreaType.KEYBOARD]),让list不避让软键盘。

参考demo:

import inputMethod from '@ohos.inputMethod';

@Entry
@Component
export struct AsrPage {
  @State message: string = 'Hello World'
  @State show: boolean = false
  inputMethodController = inputMethod.getController();
  control: TextAreaController = new TextAreaController()
  inputId: string = 'ceshi'
  @State items: Array<string> = new Array()

  aboutToAppear(): void {
    let textConfig: inputMethod.TextConfig = {
      inputAttribute: {
        textInputType: 0,
        enterKeyType: 1
      }
    }
    this.inputMethodController.attach(false, textConfig)
      .then(() => {
      })
      .catch((reason: ESObject) => {
      })
    for (let i = 0; i < 100; i++) {
      this.items.push(i + '')
    }
  }

  build() {
    NavDestination() {
      Stack({ alignContent: Alignment.Bottom }) {
        List() {
          ForEach(this.items, (item: string, index: number) => {
            ListItem() {
              Text(item).fontColor('#ff0000').fontSize(15)
            }
          })
        }.expandSafeArea([SafeAreaType.KEYBOARD])

        Column() {
          TextArea({
            placeholder: '',
            text: '',
            controller: this.control

          })
            .width('100%')
            .height(26)
            .defaultFocus(this.show)
            .focusable(this.show)
            .focusOnTouch(this.show)
            .enableKeyboardOnFocus(this.show)
            .visibility(this.show ? Visibility.Visible : Visibility.None)
            .borderColor('#ff0000')
            .backgroundColor('#ff0000')
            .id(this.inputId)

          Button('打开').onClick(() => {
            this.show = true
            this.control.caretPosition(this.message.length)
            focusControl.requestFocus(this.inputId)
          })

          Button('关闭').onClick(() => {
            this.show = true
            this.inputMethodController.hideTextInput().then(() => {
            }).catch((reason: ESObject) => {
              let data = 'sssaa<font>是的<font>不是'
              data.match('<[^>]*>')
            })
          })
        }.justifyContent(FlexAlign.End).width('100%')
      }.width('100%').height('100%')
    }.hideTitleBar(true)
  }
}