HarmonyOS 7 平行视界右侧页面被截断？先查 easy_go.json 的虚拟容器宽度

折叠屏展开后进入平行视界，左边列表、右边详情都出来了，但详情页的底部按钮有一半消失在屏幕外。把按钮宽度从 100% 改成固定 320vp 可能暂时遮住现象，却没有解释为什么同一页在手机单窗正常、在左右两页并行时出错。系统把两个页面放到一个大窗口里，旧页面如果仍按整个窗口宽度计算断点和布局，半屏中的元素就可能越界。HarmonyOS 7 的平行视界适配首先要弄清：这是配置式系统兼容方案，还是应用自己写的双栏 UI；两者处理方式不同。

本文使用官方 2026-09-04 更新的平行视界开发指导。场景以 Navigation 页面为例，演示 easy_go.json 中的 enableReducedContainerSize，再用两个可复现场景解释它不是“万能缩放开关”。这里没有把一个配置文件说成已经通过真机验证：实际效果必须在折叠屏/平板及目标 API 26 设备上检查。

先确认你接的是哪种分栏

平行视界是系统级兼容方案：通过配置让未主动实现分栏的应用在宽屏中把一级、二级页面并排显示。应用主动分栏则由自己的 Navigation/侧栏布局控制每一列的内容和状态。官方设计说明把前者定位为快速适配，把后者定位为精细定制；别把两种方案混在一个页面里同时抢布局。若应用已有完整的双栏状态管理，贸然叠加平行视界配置，排查成本反而更高。

本文问题的前提是：已经按官方指导启用平行视界，且只有分栏态出现越界。若单窗模式也越界，先查你自己的约束；若根本没进入分栏，先查入口模块和 easyGo 引用，不要直接改 enableReducedContainerSize。

最小配置：让断点看到半屏宽度

官方要求在 entry 模块的 module.json5 中引用 profile 目录下的 EasyGo 配置。下方只展示配置核心，文件名和字段以当前工程结构为准；不要把它丢进任意 feature 模块后就期待自动生效。

{
  "common": {
    "displayModeOptions": {
      "wideWindowMode": "navigationSplit",
      "squareWindowMode": "navigationSplit",
      "navigationSplitOptions": {
        "homePage": "navBar",
        "relatedPage": "DetailPage",
        "enableReducedContainerSize": true
      }
    }
  }
}

enableReducedContainerSize 的作用不是把所有组件做视觉缩小，而是让页面的逻辑像素、横向断点和窗口宽度按分栏后的容器计算。**在这份 Navigation 配置中，它位于 navigationSplitOptions 内，不是 displayModeOptions 的同级字段。这是从官方完整配置示例核对出来的。把层级写错，JSON 仍可解析，但系统未必按你想的方式识别。配置是否生效，要看同一页面在单窗和分栏时读到的宽度，以及实际截断情况。这里的 DetailPage 只是示例路由名，必须替换成项目实际的页面标识；homePage 取值应按当前 Navigation 工程和官方指南核对。

自己先查配置结构

一个很低成本的本地检查是把 easy_go.json 当普通 JSON 解析，确认关键字段存在，避免因为少一个逗号或路径放错而进入长时间的 UI 调试。下面这段 Node 命令只校验文件结构，不模拟系统分栏。

import assert from 'node:assert/strict';
import { readFileSync } from 'node:fs';

const easyGo = JSON.parse(readFileSync('easy_go.json', 'utf8'));
const options = easyGo.common?.displayModeOptions;
const split = options?.navigationSplitOptions;
assert.equal(options?.wideWindowMode, 'navigationSplit');
assert.equal(split?.enableReducedContainerSize, true);
assert.equal(split?.homePage, 'navBar');
assert.ok(split?.relatedPage);
console.log('EasyGo key fields parsed');

把代码存为 check-easygo.mjs 并与配置放在同一目录，执行 node check-easygo.mjs。这只证明本地配置可解析且关键值正确，不能代替 module.json5 引用、打包路径和设备侧分栏效果的验收。

案例一：商品详情页底部操作条被截断

复现步骤：展开折叠屏，左侧商品列表点开右侧详情；详情页有一个按 windowWidth 计算的横向操作条。单窗时能看到完整按钮，分栏时按钮伸出右边界。先记录右侧页面实际可见宽度、业务代码拿到的宽度，以及发生溢出的组件宽度。若业务代码仍按整窗宽度排版，配置 enableReducedContainerSize 后再观察断点是否落到半屏。

这个修复有边界：页面中若有手写的 width: 1200、图片最小宽度或横向绝对定位，系统无法替你把它们变成响应式布局。应优先移除硬编码宽度，给图片和按钮明确的 max-width/自适应约束；不要让配置项替代基础的页面约束设计。

做一个 A/B 对照更容易发现真假原因：保持右侧详情页内容和设备不变，只切换 enableReducedContainerSize，分别记录详情页读到的窗口宽度、操作条实际宽度和右边界位置。如果宽度读数变化、操作条仍越界，继续查固定宽度或最小宽度；如果读数完全不变，先查 profile 文件是否打进包、module.json5 的 easyGo 引用和当前设备是否真的进入平行视界。不要把“JSON 文件存在”当作“配置生效”。

案例二：长文阅读页分栏后段落和工具栏抢空间

长文阅读页通常有目录、正文、浮动工具栏。进入平行视界后，右侧正文横向变窄，但工具栏仍按宽屏模式显示所有按钮，遮住段落。这里先看断点值：若虚拟容器已正确减半，问题不是 EasyGo 配置，而是页面在窄容器中仍强行显示宽工具栏。可以把低频命令收进菜单、为正文设最小可读宽度，并在分栏/单窗之间保留阅读位置。不要每次切换都重建阅读页，否则“文字截断”修好后又出现“阅读进度归零”。

这个案例与商品详情不同：一个是宽度来源错了，一个是宽度已经对了但内容策略没跟上。只看截图会把两个问题当成同一个“平行视界 bug”。

阅读页可以故意造一个很长的工具栏作反证：先放 8 个操作，再缩窄左右页比例。如果右侧正文宽度读数已经随分栏变化而变化，工具栏依然压住内容，就把低频动作放进溢出菜单，并验证按钮焦点顺序、字号放大、横竖屏变化。enableReducedContainerSize 不会替你决定哪些操作最重要，也不会保存阅读位置。这个对照能避免为了解决遮挡而不断尝试无关的 EasyGo 字段。

为什么有时需要退出分栏

不是所有页面都适合一分为二。官方提供 fullScreenPages，适用于需要暂时全屏的图片查看等场景；横屏页面可结合 supportLandscapeFullScreen。例如高清图全屏查看要求细节不被半屏裁掉，这时把该页面显式列为全屏比在半屏里无限缩放更合理。返回时系统恢复分栏，应用仍应核对详情选中项、滚动位置和未提交编辑是否保留。

检查点	预期	失败时先查
入口模块	easyGo 指向打包后的配置	文件路径与模块归属
分栏宽度	右侧按半屏容器排版	enableReducedContainerSize 与断点来源
狭窄内容	工具栏仍可用、正文不截断	固定宽度、最小宽度、菜单折叠
全屏例外	图片页临时全屏，返回分栏	fullScreenPages 与路由名
状态连续	选中项、阅读位置保持	页面重建与业务状态归属

参考：华为平行视界开发指导、平行视界交互与选型。本文本地只完成 JSON 结构检查；API 26 构建、设备形态与页面行为仍需真机验收。