HarmonyOS Navigation无法正确显示？

Question

视图层为Tabs-TabContent-Navigation。Tabs里循环创建5个TabContent，然后每个TabContent里就是一个导航控制器Navigation，但是导航栏掉下来了一半。

Answer 1

参考示例：

EntryAbility.ets：

import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';

export default class EntryAbility extends UIAbility {
  onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onCreate');
  }

  onDestroy(): void {
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onDestroy');
  }

  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: window.Window = windowStage.getMainWindowSync();
    // 1. 设置窗口全屏
    let isLayoutFullScreen = true;
    windowClass.setWindowLayoutFullScreen(isLayoutFullScreen)
      .then(() => {
        console.info('Succeeded in setting the window layout to full-screen mode.');
      })
      .catch((err: BusinessError) => {
        console.error('Failed to set the window layout to full-screen mode. Cause:' + JSON.stringify(err));
      });
  }
  onWindowStageDestroy(): void {
    // Main window is destroyed, release UI related resources
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }
  onForeground(): void {
    // Ability has brought to foreground
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onForeground');
  }
  onBackground(): void {
    // Ability has back to background
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onBackground');
  }
}

Index.ets：

@Entry
@Component
struct Index {
  private tabBarItemList: string[] = ["首页", "门店", "工单", "资产", "我的"]
  @State private currentIndex: number = 0;
  @Builder
  private buildNavigationTitle(item: string) {
    Column() {
      Text(item)
        .fontSize(16)
        .fontWeight(FontWeight.Regular)
        .fontColor(Color.Red)
    }
    .height("100%")
    .width("100%")
    .backgroundColor(Color.Orange)
    .align(Alignment.Center)
    .justifyContent(FlexAlign.Center)
  }

  @Builder
  private buildTabBarItem(item: string, index: number) {
    Text(item)
      .fontSize(12)
      .fontWeight(FontWeight.Regular)
      .fontColor(index === this.currentIndex ? "#0A59F7" : "#7F7F7F")
  }

  build() {
    Tabs({
      barPosition: BarPosition.End,
      index: this.currentIndex
    }) {
      ForEach(
        this.tabBarItemList,
        (item: string, index: number) => {
          TabContent() {
            Navigation() {
              Column() {
                Text(item).fontSize(30)
              }
              .height("100%")
              .width("100%")
              .backgroundColor(Color.Green)
              .justifyContent(FlexAlign.Start)
            }
            .title(this.buildNavigationTitle(item))
            .backgroundColor(Color.Red)
          }
          .width("100%")
          .height("100%")
          .backgroundColor(Color.Yellow)
          .tabBar(this.buildTabBarItem(item, index))
        }
      )
    }
    .onChange((index: number) => {
      this.currentIndex = index;
    })
    .scrollable(false)
    .animationDuration(0)
    .barBackgroundColor("#F1F3F5")
    .divider({
      strokeWidth: 0.5,
    })
  }
}

需要给给navigation设置：

Navigation() {}
.titleMode(NavigationTitleMode.Mini)
.hideBackButton(true)