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

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

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

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

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

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

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

主動獲焦彈出軟鍵盤

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

TextInput()
 .defaultFocus(true)

代碼控制彈出軟鍵盤

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

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

代碼控制收起軟鍵盤

通過全局的焦點控制對象FocusController的clearFocus方法，軟鍵盤收起，例如在下面的搜索頁面中，點擊搜索按鈕時軟鍵盤收起。

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

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

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

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

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

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、軟鍵盤避讓機制

默認避讓效果

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

如果當前輸入框不會被軟鍵盤遮擋，則不上抬組件，如圖所示點擊輸入框1，組件不會上抬。

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

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

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

鍵盤避讓模式

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

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

3、軟鍵盤避讓常見問題

重要信息被軟鍵盤遮擋

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

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

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

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

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

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

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

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

當用戶點擊彈窗底部的輸入框的時候，彈窗會整體上抬，輸入框上抬的距離也過多。

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

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

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