适配平台：鸿蒙 NEXT、平板、折叠屏手机

一、前言

在折叠屏、平板这类大屏设备上，单页面展示信息效率很低，平行视界（Multi-Screen） 是鸿蒙专门为大屏打造的特色能力：把一个应用拆成左右两个独立窗口，左侧列表、右侧详情，用户可以同时浏览、操作，无需来回切换页面，是官方重点扶持的大屏适配方案。

很多初学者初次接入平行视界会遇到这些典型问题：

1. 折叠展开 / 折起时页面布局错乱、生命周期异常
2. 左右窗口数据不同步、路由跳转互相干扰
3. 小屏手机上没有自动退回单窗口模式
4. 窗口分割比例、分割线样式无法自定义
5. 冷启动、进程恢复之后，平行视界状态丢失

本章基于 ArkTS 完整实战，从原理、配置、代码实现、状态同步、异常适配、踩坑复盘完整讲解，适合想要给应用做大屏适配的开发者。

二、平行视界能力原理

平行视界本质是系统级的窗口调度能力，同一个应用内，启动两个独立的 UIAbility 实例，分为主窗口（左窗）、辅窗口（右窗）：

1. 设备检测：系统自动识别设备形态（折叠屏展开、平板大屏），判断是否支持平行视界；
2. 路由分发：我们在配置文件中声明页面配对规则，指定【列表页 ↔ 详情页】绑定关系；
3. 窗口联动：左侧列表点击条目，消息通知右侧辅窗口加载对应详情；
4. 形态监听：设备折叠、旋转时，系统自动切换「双窗模式 ↔ 单窗模式」；
5. 数据通信：两个 UIAbility 相互独立，不能直接访问变量，依靠EventHub/AppStorage/ 公共事件完成数据同步。

关键区分：平行视界 ≠ 分屏！
系统分屏是两个不同应用并排；平行视界是同一个应用的双页面协同，交互链路更统一，是鸿蒙原生大屏体验。

三、前置环境准备

• DevEco Studio：5.0+
• SDK：HarmonyOS NEXT 5.0.0(12)
• 测试设备：华为平板 / 折叠屏真机（模拟器也可以调试形态切换）
• 工程类型：Stage 模型（FA 模型不支持平行视界）

四、项目配置（module.json5）

开启平行视界，第一步是在 module.json5 配置页面配对规则，告诉系统：哪些页面组合成双窗口。

{
  "module": {
    "name": "entry",
    "type": "entry",
    "description": "$string:module_desc",
    "mainElement": "EntryAbility",
    "deviceTypes": ["tablet", "2in1", "foldable"],
    "deliveryWithInstall": true,
    "installationFree": false,
    "pages": "$profile:main_pages",
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ets",
        "description": "$string:EntryAbility_desc",
        "icon": "$media:icon",
        "label": "$string:EntryAbility_label",
        "startWindowIcon": "$media:startIcon",
        "startWindowBackground": "$color:start_window_background",
        "exported": true,
        "skills": [
          {
            "entities": ["entity.system.home"],
            "actions": ["action.system.home"]
          }
        ],
        // 平行视界核心配置
        "multiScreen": {
          "enable": true,
          "pairRules": [
            {
              "primary": "pages/ListPage",
              "secondary": "pages/DetailPage"
            }
          ]
        }
      }
    ]
  }
}

module.json5参数说明：

• enable: true：开启平行视界能力；
• pairRules：页面配对数组，primary主页面（左侧列表），secondary辅页面（右侧详情）；
• deviceTypes：限定在平板、二合一、折叠屏设备生效，手机默认不启用双窗。

五、代码实现

1. 全局状态管理(AppStorage,跨窗口共享数据)
   两个窗口是独立Ability，不能直接传参，使用AppStorage做全局状态共享

// ets/common/State.ets
@AppStorage("selectNoteId") static selectId: string = "";
@AppStorage("isParallelMode") static isParallel: boolean = false;

2. 左侧列表页 ListPage.ets
   点击列表项，修改全局选中 ID，通知右侧详情页刷新；同时监听平行视界模式。

import { State } from '../common/State'
import { display } from '@kit.ArkUI'

@Entry
@Component
struct ListPage {
  @State noteList: Array<{id:string, title:string}> = [
    {id:"1", title:"鸿蒙平行视界入门笔记"},
    {id:"2", title:"ShareKit精准碰一碰开发记录"},
    {id:"3", title:"折叠屏布局适配方案"}
  ]

  aboutToAppear() {
    // 判断当前是否处于平行视界模式
    let info = display.getDefaultDisplay().getDisplayInfoSync();
    State.isParallel = info.width > 840;
  }

  build() {
    Column() {
      Text("笔记列表【左窗】").fontSize(22).margin(10)
      List() {
        ForEach(this.noteList, (item)=>{
          ListItem() {
            Text(item.title)
              .fontSize(18)
              .width('100%')
              .padding(12)
              .onClick(()=>{
                // 更新选中id，通知右侧刷新
                State.selectId = item.id
                // 如果是单窗口模式，直接路由跳转详情
                if(!State.isParallel) {
                  router.pushUrl({url:"pages/DetailPage"})
                }
              })
          }
        })
      }.layoutWeight(1)
    }
    .width('100%')
    .height('100%')
  }
}

3. 右侧详情页 DetailPage.ets
   监听selectNoteId变化，自动加载对应笔记内容；兼容单窗口打开、双窗联动两种场景。

import { State } from '../common/State'

@Entry
@Component
struct DetailPage {
  @StorageLink("selectNoteId") selectId: string = ""
  @State content: string = "请在左侧选择一条笔记"

  aboutToAppear() {
    this.loadDetail()
  }

  // 监听选中ID变化，自动刷新内容
  @Watch("selectId")
  loadDetail() {
    switch(this.selectId) {
      case "1": this.content = "平行视界：应用双窗口协同，大屏专属能力...";break
      case "2": this.content = "精准碰一碰基于ShareKit，依托分布式软总线NFC近场交互...";break
      case "3": this.content = "折叠屏适配重点：监听折叠状态、动态修改布局...";break
      default: this.content = "请选择列表项"
    }
  }

  build() {
    Column() {
      Text("笔记详情【右窗】").fontSize(22).margin(10)
      Text(this.content).fontSize(16).padding(15)
    }
    .width('100%')
    .height('100%')
  }
}

六、形态监听：折叠/展开动态适配

折叠屏从展开（大屏双窗）折成手机形态，系统会自动退出平行视界。我们需要监听设备折叠状态，修改 UI 布局：

import { foldStatusManager } from '@kit.ArkUI'

// 订阅折叠状态变化
let foldSub = foldStatusManager.on('foldStatusChange', (status)=>{
  if(status === foldStatusManager.FoldStatus.FOLD_STATUS_FOLDED) {
    // 折叠：单窗口模式
    State.isParallel = false
  } else if(status === foldStatusManager.FoldStatus.FOLD_STATUS_EXPANDED) {
    // 完全展开，大屏，开启平行视界
    State.isParallel = true
  }
})

注意：
页面销毁时记得取消订阅，防止内存泄漏：foldStatusManager.off('foldStatusChange', foldSub)

七、异常场景测试与兼容方案

八、Mermaid流程图(平行视界整体流转)

流程图全息:

九、高频踩坑点

1. FA 模型不支持平行视界，必须 Stage 模型，很多老项目移植踩这个坑；
2. 不要直接在两个页面之间用 router 传参，辅窗口是独立实例，参数接收不到；
3. 不要硬写窗口固定宽高，大屏、折叠屏比例差异很大，优先layoutWeight弹性布局；
4. 平行视界只是页面配对，不能跨 Ability 共享普通变量，全局状态走 AppStorage 或者commonEvent；
5. 上架审核注意：小屏设备上不能强制双窗，否则会被判定适配异常驳回；
6. 调试技巧：模拟器可以自由切换折叠状态、修改分辨率，前期不用真机。

十、拓展方向

1. 自定义分割线样式、调整左右窗口默认占比；
2. 双窗口拖拽、跨窗口拖拽文件；
3. 和之前的【精准碰一碰】联动：左窗列表，碰一碰收到分享数据，自动在右侧打开笔记；
4. 搭配闪控窗，实现悬浮小窗口 + 平行视界组合交互。

拓展方向联动流程图：
把上面四个拓展方向串起来，整体交互链路如下：

链路说明：

1. 窗口定制：分割线样式与默认占比属于窗口层配置，是后续拖拽、悬浮交互的视觉基础；
2. 拖拽交互：双窗之间拖拽文件，本质是把「数据源」和「展示端」解耦，拖拽落点即触发右窗加载；
3. 碰一碰联动：NFC 收到分享数据后不直接跳转页面，而是写入全局状态，由右窗监听刷新，避免破坏平行视界的窗口结构；
4. 闪控窗组合：悬浮小窗适合承载辅助操作（如快速记录、临时预览），主流程仍留在平行视界双窗中，两者通过同一份全局状态保持一致。

十一、结论

• 平行视界是鸿蒙大屏差异化体验的核心能力，
• 做好适配之后，你的应用在平板、折叠屏上的体验会远超普通单页面应用，也是官方流量扶持的重点方向。
• 本文完整工程代码已经跑通，大家可以直接在 DevEco Studio 新建 Stage 项目，替换配置和页面进行调试。
• 如果后续想要和精准碰一碰能力组合开发，也可以基于这套双窗口框架继续扩展。