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

可以左右都添加 .expandSafeArea([SafeAreaType.KEYBOARD],[ SafeAreaEdge.BOTTOM])

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

//1.Entry.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) .width(‘100%’) } .height(‘100%’) .width(‘100%’) } }