軟鍵盤是用戶進(jìn)行交互的重要途徑之一，同時(shí)軟鍵盤的彈出和收起，可能會(huì)影響到正在顯示的UI元素，影響用戶體驗(yàn)，出現(xiàn)如下常見(jiàn)的軟鍵盤布局適配問(wèn)題：

重要信息被軟鍵盤遮擋：當(dāng)軟鍵盤彈出時(shí)，輸入框或其它重要UI元素可能會(huì)被鍵盤遮擋，導(dǎo)致用戶無(wú)法看到或訪問(wèn)它們。

軟鍵盤彈出導(dǎo)致布局錯(cuò)位：內(nèi)容可能會(huì)不恰當(dāng)上移，影響用戶體驗(yàn)。

軟鍵盤彈出導(dǎo)致彈窗過(guò)度上抬：彈窗被鍵盤上頂，造成不好的體驗(yàn)。

針對(duì)以上問(wèn)題，本文將幫助開發(fā)者了解軟鍵盤的彈出和收起的控制、避讓機(jī)制以及軟鍵盤常見(jiàn)問(wèn)題的解決方法。

1、軟鍵盤的彈出收起和監(jiān)聽

用戶點(diǎn)擊輸入框時(shí)，軟鍵盤默認(rèn)彈出。但在特定場(chǎng)景下，需要對(duì)軟鍵盤的彈出和收起進(jìn)行控制，如點(diǎn)擊空白區(qū)域收起軟鍵盤，進(jìn)入頁(yè)面時(shí)輸入框主動(dòng)獲焦。開發(fā)者還需根據(jù)軟鍵盤狀態(tài)和高度調(diào)整頁(yè)面布局。

主動(dòng)獲焦彈出軟鍵盤

有時(shí)候進(jìn)入頁(yè)面，希望頁(yè)面中的輸入框能主動(dòng)獲焦并且彈出軟鍵盤，方便用戶直接輸入，比如，點(diǎn)擊應(yīng)用首頁(yè)的搜索框。這可以通過(guò)將輸入框的defaultFocus設(shè)置為true來(lái)實(shí)現(xiàn)。

TextInput()
 .defaultFocus(true)

代碼控制彈出軟鍵盤

開發(fā)者可以使用FocusController的requestFocus()方法，通過(guò)組件的id將焦點(diǎn)轉(zhuǎn)移到組件樹對(duì)應(yīng)的實(shí)體節(jié)點(diǎn)，并且彈出軟鍵盤。例如，表情面板切換到文本輸入時(shí)，點(diǎn)擊表情圖標(biāo)拉起系統(tǒng)軟鍵盤，便于用戶直接輸入。

TextInput({placeholder:'Please enter a contact name'})
 .id('input1')
Button('login')
 .onClick(() =>{
 this.getUIContext().getFocusController().requestFocus('input1');
 })

代碼控制收起軟鍵盤

通過(guò)全局的焦點(diǎn)控制對(duì)象FocusController的clearFocus方法，軟鍵盤收起，例如在下面的搜索頁(yè)面中，點(diǎn)擊搜索按鈕時(shí)軟鍵盤收起。

Button('Search')
 .onClick(() =>{
 this.getUIContext().getFocusController().clearFocus();
 })

此外，開發(fā)者可調(diào)用stopEditing()方法來(lái)關(guān)閉鍵盤，該方法需為輸入框單獨(dú)綁定一個(gè)TextInputController對(duì)象。在存在多個(gè)輸入框的場(chǎng)景下，需要綁定多個(gè)TextInputController對(duì)象，使用起來(lái)較為繁瑣，推薦改用clearFocus()方法來(lái)解除焦點(diǎn)。

@Component
structStopEditingCpt{
privatecontroller:TextInputController=newTextInputController();
build() {
 Column() {
  TextInput({placeholder:'Input',controller:this.controller})
  Button('Search')
    .onClick(() =>{
    this.controller.stopEditing();
    })
  }
 }
}

監(jiān)聽獲取軟鍵盤高度、鍵盤彈出和收起

開發(fā)者可以通過(guò)獲取軟鍵盤高度、監(jiān)聽軟鍵盤的彈出和收起狀態(tài)，調(diào)整組件位置以適配界面或顯示隱藏某些組件。通過(guò)window模塊的on('keyboardHeightChange')方法開啟固定態(tài)軟鍵盤高度變化的監(jiān)聽，實(shí)時(shí)獲取軟鍵盤寬高。

aboutToAppear():void{
 window.getLastWindow(this.getUIContext().getHostContext()).then(currentWindow=>{
   currentWindow.on('keyboardHeightChange',(data:number) =>{
   this.keyboardHeight=this.getUIContext().px2vp(data);
   })
  })
 }

監(jiān)聽獲取安全區(qū)域高度

window.getLastWindow(this.getUIContext().getHostContext()).then(curWindow => {
   curWindow.on('avoidAreaChange',data=> {
   if(data.area.bottomRect.height <=?0) {
? ? ? ? ??this.isKeyBoardHidden =?true;
? ? ? ? }?else?{
? ? ? ? ??this.isKeyBoardHidden =?false;
? ? ? ? }
? ? ? })
? ? })}

2、軟鍵盤避讓機(jī)制

默認(rèn)避讓效果

解決軟鍵盤的界面適配問(wèn)題，首先需要了解在HarmonyOS系統(tǒng)中軟鍵盤的避讓機(jī)制是怎么樣的。

如果當(dāng)前輸入框不會(huì)被軟鍵盤遮擋，則不上抬組件，如圖所示點(diǎn)擊輸入框1，組件不會(huì)上抬。

當(dāng)前輸入框會(huì)被軟鍵盤遮擋，則上抬組件至剛好在軟鍵盤上方顯示完整的輸入框，輸入框上方的組件會(huì)跟著抬起，下方的組件不會(huì)露出，如下方的輸入框12。

彈窗內(nèi)輸入框避讓規(guī)則

彈窗避讓可以通過(guò)BaseDialogOptions，設(shè)置彈窗的避讓模式KeyboradAvoidMode，當(dāng)設(shè)置為默認(rèn)避讓Default模式時(shí)，如果軟鍵盤彈出會(huì)覆蓋輸入框，彈窗整體會(huì)上抬，并且為了UX美觀，會(huì)存在默認(rèn)的間隔，默認(rèn)大小為16vp。

鍵盤避讓模式

當(dāng)用戶在輸入時(shí)，為了確保輸入框不會(huì)被鍵盤遮擋，系統(tǒng)提供了避讓模式來(lái)解決這一問(wèn)題。開發(fā)者可以通過(guò)setKeyboardAvoidMode控制虛擬鍵盤抬起時(shí)頁(yè)面的避讓模式，鍵盤抬起時(shí)默認(rèn)頁(yè)面避讓模式為上抬模式，下面列舉了幾種常見(jiàn)的避讓模式。

1、上抬模式（KeyboardAvoidMode.OFFSET）：為了避讓軟鍵盤，Page內(nèi)容會(huì)整體上抬。如下示例代碼，軟鍵盤彈出時(shí)，頁(yè)面整體上抬： 2、壓縮模式（KeyboardAvoidMode.RESIZE）：當(dāng)軟鍵盤高度改變時(shí)，調(diào)整Page大小。Page下設(shè)置百分比寬高的組件會(huì)跟隨壓縮，直接設(shè)置寬高的組件保持固定大小。注意，設(shè)置KeyboardAvoidMode.RESIZE時(shí)，安全區(qū)設(shè)置expandSafeArea 無(wú)效。 3、不避讓模式（KeyboardAvoidMode.NONE）：軟鍵盤將直接覆蓋頁(yè)面UI，不會(huì)觸發(fā)界面布局調(diào)整。例如在全屏沉浸式場(chǎng)景（游戲/視頻播放器等），為保障用戶體驗(yàn)的完整性，開發(fā)者可以使用KeyboardAvoidMode.NONE模式。 圖：壓縮模式，底部工具欄抬起

3、軟鍵盤避讓常見(jiàn)問(wèn)題

重要信息被軟鍵盤遮擋

例如下面這個(gè)電子郵件示例，內(nèi)容包括標(biāo)題欄、內(nèi)容區(qū)域和底部操作欄。點(diǎn)擊輸入內(nèi)容的輸入框時(shí)，軟鍵盤會(huì)遮擋底部操作欄，影響用戶體驗(yàn)。這種情況只要設(shè)置避讓模式為壓縮模式即可。

aboutToAppear():void{
this.getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE);
}

需要注意的是內(nèi)容區(qū)域高度的設(shè)置需要用百分比的方式實(shí)現(xiàn)

軟鍵盤彈出導(dǎo)致布局錯(cuò)位

例如下面這樣的一個(gè)聊天界面，頂部是一個(gè)自定義的標(biāo)題，下方為可滾動(dòng)聊天消息區(qū)域，底部是消息輸入框。

想要頂部標(biāo)題不被軟鍵盤向上抬，需要給標(biāo)題組件設(shè)置

.expandSafeArea([SafeAreaType.KEYBOARD])屬性，使標(biāo)題組件不避讓鍵盤。

軟鍵盤彈出導(dǎo)致彈窗過(guò)度上抬

當(dāng)用戶點(diǎn)擊彈窗底部的輸入框的時(shí)候，彈窗會(huì)整體上抬，輸入框上抬的距離也過(guò)多。

為了解決以上問(wèn)題，可以使用Navigation.Dialog，通過(guò)設(shè)置NavDestination的mode為NavDestinationMode.DIALOG彈窗類型，此時(shí)整個(gè)NavDestination默認(rèn)透明顯示。同時(shí)，設(shè)置鍵盤避讓模式為壓縮模式KeyboardAvoidMode.RESIZE。

設(shè)置軟鍵盤和彈窗組件距離

彈窗類組件默認(rèn)額避讓模式下，軟鍵盤彈起之后彈窗組件之間16vp間隔，開發(fā)者可以通過(guò)彈窗參數(shù)BaseDialogOptions中keyboardAvoidDistance，調(diào)整系統(tǒng)設(shè)置的避讓間距彈窗組件和軟鍵盤之間的距離。設(shè)置軟鍵盤間距時(shí)，需要將keyboardAvoidMode值設(shè)為KeyboardAvoidMode.DEFAULT。