目录

分屏模式，不支持分栏显示

问题现象

应用分屏时，不支持分栏显示。

背景知识

问题定位

  1. 查阅平板上全屏时的分栏情况，竖屏时单栏，横屏时双栏。
  2. 查阅首页代码中是否使用Navigation组件实现页面的跳转。
  3. 查阅Navigation组件的mode属性是否针对断点类型进行适配，例如下面代码。
    Navigation(this.pathInfo) {
  // ...
}
.mode(this.currentBreakPoint === 'sm' ? NavigationMode.Stack : this.notesNavMode)

分析结论

应用全屏横向时可以正常分栏，且代码中Navigation的mode属性也有根据断点类型进行适配，那就是分屏时的断点刚好适配的是单栏，所以分屏时才会单栏显示。

修改建议

在EntryAbility.ets文件的onWindowStageCreate中获取到window。

import { ConfigurationConstant, UIAbility } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';

const DOMAIN = 0x0000;

export default class EntryAbility extends UIAbility {
  onCreate(): void {
    try {
      this.context.getApplicationContext().setColorMode(ConfigurationConstant.ColorMode.COLOR_MODE_NOT_SET);
    } catch (err) {
      hilog.error(DOMAIN, 'testTag', 'Failed to set colorMode. Cause: %{public}s', JSON.stringify(err));
    }
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onCreate');
  }

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

  onWindowStageCreate(windowStage: window.WindowStage): void {
    AppStorage.setOrCreate('windowClass', windowStage.getMainWindowSync());
    // Main window is created, set main page for this ability
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageCreate');

    windowStage.loadContent('pages/Index', (err) => {
      if (err.code) {
        hilog.error(DOMAIN, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err));
        return;
      }
      hilog.info(DOMAIN, 'testTag', 'Succeeded in loading the content.');
    });
  }

  onWindowStageDestroy(): void {
    // Main window is destroyed, release UI related resources
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onWindowStageDestroy');
  }

  onForeground(): void {
    // Ability has brought to foreground
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onForeground');
  }

  onBackground(): void {
    // Ability has back to background
    hilog.info(DOMAIN, 'testTag', '%{public}s', 'Ability onBackground');
  }
};

可以增加Navigation组件的mode属性代码适配逻辑，保证在屏幕横屏时，可以分栏显示。

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

@Entry
@Component
struct Index {
  windowClass: window.Window | undefined = AppStorage.get('windowClass');
  currentBreakPoint: WidthBreakpoint = this.getUIContext().getWindowWidthBreakpoint();
  currentWindowStatusType: WindowStatusType | undefined = this.windowClass?.getWindowStatus();
  @State currentMode: NavigationMode = NavigationMode.Stack;
  pathInfos: NavPathStack = new NavPathStack();

  setCurrentMode() {
    // 判断屏幕方向，横屏时分栏
    if (display.getDefaultDisplaySync().orientation === display.Orientation.LANDSCAPE ||
      display.getDefaultDisplaySync().orientation === display.Orientation.LANDSCAPE_INVERTED) {
      if (this.currentWindowStatusType === 4) {
        this.currentMode = NavigationMode.Stack;
      } else {
        this.currentMode = NavigationMode.Split;
      }
    } else {
      // 纵向时根据横向断点适配分栏
      this.currentMode = this.currentBreakPoint <= 2 ? NavigationMode.Stack : NavigationMode.Split;
    }
  }

  aboutToAppear(): void {
    this.setCurrentMode();
    this.windowClass?.on('windowSizeChange', () => {
      this.currentBreakPoint = this.getUIContext().getWindowWidthBreakpoint();
      this.setCurrentMode();
    });
    this.windowClass?.on('windowStatusChange', (WindowStatusType) => {
      this.currentWindowStatusType = WindowStatusType;
    });
  }

  build() {
    Navigation(this.pathInfos) {
      Column() {
        Text('测试分屏时，是否可以分栏显示');
      };
    }
    .mode(this.currentMode);
  }
}