HarmonyOS 7 平行视界返回后页面乱跳：购物模式、导航模式与返回栈怎么对齐

折叠屏展开后，左侧是商品列表，右侧是详情。用户在右侧连续打开推荐商品，再按一次返回，页面却直接回到列表首页；或者右侧已经切换文章，左侧高亮仍停在旧目录。布局比例没有问题，真正出错的是应用仍按单页面思路管理路由。

HarmonyOS 7/API 26 的平行视界面向折叠屏和平板双页面并行场景。官方设计区分购物模式与导航模式，并支持 1:1、1:2、2:1 等比例。它和普通响应式分栏不只是宽度不同，页面关系、内容推进和返回行为也不同。

验证与边界：本文先核对华为官方文档与 API 版本，再用可执行的宿主逻辑测试验证状态转换、排序、幂等或资源预算。当前本机 DevEco SDK 为 API 24，且没有 HDC 真机，因此文中的 API 26 接口代码属于依据官方签名整理的接入骨架，不宣称已经完成 API 26 工程编译或真机实测。正式上线前仍需在 API 26 SDK 与目标设备上完成编译、运行、异常分支和资源指标验收。 本文的状态模型用于解释和测试导航语义，具体平行视界接入配置需以目标版本官方开发文档和设备行为为准。

先选模式，再写路由

购物模式适合“左侧列表不断选择，右侧详情还能继续深入”的连续浏览；导航模式适合“左侧目录稳定，右侧内容切换”的固定导航。两种模式如果共用同一套 push 规则，返回键很容易失去用户预期。

案例一：购物模式保留右侧详情链

列表点击商品 A 后，右侧显示 A；在 A 的推荐区点击 B，右侧进入 B；返回一次应回到 A，而不是关闭整个双页或把左侧列表回到初始状态。

interface ShoppingState { masterSelection?: string; detailStack: string[] }

function openProduct(state: ShoppingState, id: string, fromMaster: boolean): ShoppingState {
  if (fromMaster) return { masterSelection: id, detailStack: [id] };
  return { ...state, detailStack: [...state.detailStack, id] };
}

function backShopping(state: ShoppingState): ShoppingState {
  if (state.detailStack.length <= 1) return { ...state, detailStack: [] };
  return { ...state, detailStack: state.detailStack.slice(0, -1) };
}

let shopping = openProduct({ detailStack: [] }, 'A', true);
shopping = openProduct(shopping, 'B', false);
console.assert(backShopping(shopping).detailStack.at(-1) === 'A');

左侧选中项代表这次浏览从哪里开始，右侧栈代表详情内继续深入的路径。两者不能用同一个字符串替代。

案例二：导航模式只替换右侧内容

文档目录左侧固定，点击“安装”或“调试”只替换右侧章节。此时不需要为每次目录点击都叠加详情栈，否则用户来回切三次目录就要按三次返回。

interface NavigationState { section: string; anchor?: string }

function selectSection(_: NavigationState, section: string): NavigationState {
  return { section }; // 替换当前内容，不累积历史章节
}

function jumpAnchor(state: NavigationState, anchor: string): NavigationState {
  return { ...state, anchor };
}

let navigation = selectSection({ section: 'overview' }, 'install');
navigation = selectSection(navigation, 'debug');
console.assert(navigation.section === 'debug');
console.assert(navigation.anchor === undefined);

导航模式的返回通常应退出当前详情层级或关闭双页面状态，而不是重放所有目录点击。具体行为要与产品信息架构和系统返回规范一起验收。

比例变化不能改变数据语义

1:1、1:2、2:1 只改变左右可用空间，不应重置当前主页面选择和详情栈。拖拽比例后详情消失，通常说明页面把“宽度变化”错误地当成“重新初始化业务状态”。状态应放在稳定的路由或页面模型中，布局只读取状态。

type Ratio = '1:1' | '1:2' | '2:1';
interface ParallelState { ratio: Ratio; master: string; details: string[] }

function resize(state: ParallelState, ratio: Ratio): ParallelState {
  return { ...state, ratio };
}

const before: ParallelState = { ratio: '1:1', master: 'list', details: ['A', 'B'] };
const after = resize(before, '1:2');
console.assert(after.details.join(',') === 'A,B');

普通分栏还是平行视界

如果左右区域本来就是同一页面内同时编辑的数据，例如表格与属性面板，普通分栏更直接。如果是两个页面之间的连续导航、希望系统提供大屏双页体验，则优先评估平行视界。不要因为“看起来都是左右两块”就混用。

回归矩阵

操作	购物模式期望	导航模式期望
左侧点击	重建当前详情起点	替换右侧章节
右侧继续点击	压入详情栈	通常替换或跳锚点
返回	逐层弹出详情	按产品层级退出
拖拽比例	保留主选中和详情栈	保留目录和当前位置
折叠/展开	状态连续、布局重算	状态连续、布局重算

官方资料

• 平行视界设计指南
• HarmonyOS 7 平行视界能力解读

平行视界适配的核心不是把页面切成两半，而是把页面关系说清楚。先决定购物模式还是导航模式，再定义主选择、详情栈和返回语义，布局比例变化就不会把业务状态一起拖乱。