HarmonyOS 如何禁止tabbar随软键盘的上弹而避让？

Question

使用navigation进行分屏适配时，右侧聊天页面底部栏需要避让软键盘，当点击输入框时右侧的底部栏弹至键盘之上。

但现在发现当键盘弹起时，左侧页面的tabbar也会跟着避让弹起。请问如何让tabbar保持在底部呢？

目前是使用

window.getLastWindow(getContext(this)).then(currentWindow => {
  currentWindow.getUIContext().setKeyboardAvoidMode(KeyboardAvoidMode.RESIZE)
})

来控制键盘弹起方式。如果改成KeyboardAvoidMode.OFFSET，虽然tabbar不弹起，但右侧页面的避让效果又会有问题。如何才能实现tabbar不弹起，而右侧页面避让效果像KeyboardAvoidMode.RESIZE这样呢？

Answer 1

可以左右都添加

.expandSafeArea([SafeAreaType.KEYBOARD],[ SafeAreaEdge.BOTTOM])

然后右侧通过监听键盘高度来实现textinput避让。

请参考以下代码：

//1.EntryAbility.ets中存储windowClass。
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.');
let windowClass = windowStage.getMainWindowSync();//*****
AppStorage.setOrCreate('windowClass', windowClass);//*****

});
}

//2.index.ets
//左侧使用      .expandSafeArea([SafeAreaType.KEYBOARD],[ SafeAreaEdge.BOTTOM])

@Entry
@Component
struct Index {
  @State fontColor: string = '#182431'
  @State selectedFontColor: string = '#007DFF'
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()
  @Provide pathStack: NavPathStack = new NavPathStack();
  private arr: number[] = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]

  @Builder
  tabBuilder(index: number, name: string) {
    Column() {
      Text(name)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .fontSize(16)
        .fontWeight(this.currentIndex === index ? 500 : 400)
      Divider()
        .strokeWidth(2)
        .color('#007DFF')
        .opacity(this.currentIndex === index ? 1 : 0)
    }
    .width('100%')
  }

  build() {
    Navigation(this.pathStack) {
      Column() {
        Tabs({ barPosition: BarPosition.End, index: this.currentIndex, controller: this.controller }) {
          TabContent() {
            Column() {
              List({ space: 20, initialIndex: 0 }) {
                ForEach(this.arr, (item: number) => {
                  ListItem() {
                    Text('' + item)
                      .width('100%')
                      .height(100)
                      .fontSize(16)
                      .textAlign(TextAlign.Center)
                      .borderRadius(10)
                      .backgroundColor(0xFFFFFF)
                  }
                  .onClick(()=>{
                    this.pathStack.pushPathByName('PageOne',true)
                  })
                }, (item: string) => item)
              }
            }.width('100%').height('100%').backgroundColor('#00CB87')

          }.tabBar(this.tabBuilder(0, 'green'))

          TabContent() {
            Column().width('100%').height('100%').backgroundColor('#007DFF')
          }.tabBar(this.tabBuilder(1, 'blue'))

          TabContent() {
            Column().width('100%').height('100%').backgroundColor('#FFBF00')
          }.tabBar(this.tabBuilder(2, 'yellow'))

          TabContent() {
            Column().width('100%').height('100%').backgroundColor('#E67C92')
          }.tabBar(this.tabBuilder(3, 'pink'))
        }
        .vertical(false)
        .barMode(BarMode.Fixed)
        .onChange((index: number) => {
          this.currentIndex = index
        })
        .width('100%')
        .height('100%')
        .backgroundColor('#F1F3F5')
      }.width('100%')
      .expandSafeArea([SafeAreaType.KEYBOARD],[ SafeAreaEdge.BOTTOM])//*****
    }
    .hideTitleBar(true)
  }
}

//3.右侧Page.ets

import { window } from '@kit.ArkUI';

@Builder
export function PageOneBuilder() {
  Page()
}

@Entry
@Component
struct Page {
  //*****
  @State keyboardHeight: number = 0; //监听键盘高度
  //*****
  aboutToAppear(): void {
    let windowClass: window.Window | undefined = AppStorage.get<window.Window>('windowClass')
    windowClass?.on('keyboardHeightChange', (data) => {
      this.keyboardHeight = data <= 0 ? 0 : px2vp(data) - 16;//16是间隙
    });
  }

  build() {
    NavDestination(){
      Column() {
        TextInput({placeholder:'请输入文字'})
      }
      .backgroundColor(Color.Red)
      .expandSafeArea([SafeAreaType.KEYBOARD],[ SafeAreaEdge.BOTTOM]) //*****
      .margin({ bottom:this.keyboardHeight})//*****
      .justifyContent(FlexAlign.End)
      .layoutWeight(1)//*****
      // .height('100%')
      .width('100%')
    }
    .height('100%')
    .width('100%')
  }
}

注意column这里不能固定为.height('100%')，这样的话高度不会收缩。所以使用layoutWeight(1)撑满。

标注//*****的位置为主要代码。