HarmonyOS focusControl.requestFocus(id) 的问题

focusControl.requestFocus(id) 使得TextInput获取焦点时，软键盘会闪一下。

我的需求是，页面中有多个TextInput，然后按软键盘的下一步按钮切换到下一个TextInput。

怎么能让获取焦点的同时，软键盘不要先隐藏在出现，需要一直出现在屏幕中。

HarmonyOS

zxjiu

2024-09-02 12:38:09

浏览

回答 1

待解决

回答 1

按赞同

按时间

Heiang

自己写了个List的demo尝试复现您的问题，

用了两个步骤来尝试解决，请您参考是否对您有帮助。

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); 
}); 
}

2.将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 }) 
  } 
}

2024-09-02 17:14:20

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

HarmonyOS focusControl.requestFocus(id) 的问题

订阅鸿蒙技术特刊，精选内容抢先看