HarmonyOS 应用内如何实现分屏？

Question

如题：HarmonyOS 应用内如何实现分屏？

Answer 1

示例代码如下：

1、Index页面

import { common, StartOptions } from '@kit.AbilityKit';

@Entry
@Component
struct Index {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column({ space: 8 }) {
        Text(this.message + '首页')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Divider()
          .height(1).width('100%')

        Text('点击我启动分屏')
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
          .margin({top:'20'})
          .onClick(() => {
            let want = {
              bundleName: 'com.example.myapplication0802',
              abilityName: 'Ability2',
              moduleName: 'entry'
            } as Want;
            let options = { windowMode: 101, } as StartOptions;
            this.startAbility(want, options);
          })
      }
    }

    .height('100%')
    .width('100%')
  }

  startAbility(want: Want, options: StartOptions,) {
    this.message = `want: ${JSON.stringify(want)}, options: ${JSON.stringify(options)}`;
    try {
      (getContext(this) as common.UIAbilityContext)
        .startAbility(want, options, (error) => {
          if (error.code) {
            // 处理业务逻辑错误
            console.info(`startAbility error`);
            return;
          }
          // 执行正常业务
          console.info(`startAbility succeed want:${JSON.stringify(want)} options: '${JSON.stringify(options)}'`);
        });
    } catch (paramError) {
      // 处理入参错误异常
      console.info('startAbility catch error.code: ' + JSON.stringify(paramError.code) +
        ' error.message: ' + JSON.stringify(paramError.message));
    }
  }
}

2、在entry/src/main/ets 下新建 ability2 文件夹，里面新增文件ability2

import AbilityConstant from '@ohos.app.ability.AbilityConstant';
import hilog from '@ohos.hilog';
import UIAbility from '@ohos.app.ability.UIAbility';
import Want from '@ohos.app.ability.Want';
import window from '@ohos.window';

export default class Ability2 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/Index2', (err, data) => {
      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. Data: %{public}s', JSON.stringify(data) ?? '');
    });
  }

  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');
  }
}

3、在module.json5中的 “abilities” 数组中新增配置，对应的资源字符串需要新增

{
  "name": "Ability2",
"srcEntry": "./ets/ability2/Ability2.ets",
"orientation": "auto_rotation",
"description": "$string:Ability2_desc",
"icon": "$media:layered_image",
"label": "$string:Ability2_label",
"startWindowIcon": "$media:startIcon",
"startWindowBackground": "$color:start_window_background"
}

4、在pages中新增页面Index2，并在main\_pages.json增加配置

import { common, StartOptions } from '@kit.AbilityKit';

@Entry
@Component
struct Index2 {
  @State message: string = 'Hello World';

  build() {
    Row() {
      Column({ space: 8 }) {
        Text(this.message + '第二页')
          .fontSize(20)
          .fontWeight(FontWeight.Bold)
        Divider()
          .height(1).width('100%')

        Text('我是第二页')
          .fontSize(16)
          .fontWeight(FontWeight.Bold)
          .margin({top:'20'})
      }
    }

    .height('100%')
    .width('100%')
  }
}