Pura X 展开后列表跳回顶部：HarmonyOS 7 折叠布局切换的状态迁移方案

先看问题是怎么发生的

折叠态使用单栏列表，展开后切成左侧列表加右侧详情。开发者直接替换整棵组件树，选中项、滚动位置和未提交文本全部丢失。用户看到的不是“更大的布局”，而是一次毫无理由的页面重置。

验证边界：本文依据文末华为开发者官方资料整理，并用可执行 TypeScript 状态模型验证应用侧分支。当前本机为 API 24 且未连接 HarmonyOS 7 真机，文中的 API 26 代码属于接入骨架，不声称已完成 API 26 编译、真机性能测试或设备兼容认证。上线前仍需在目标 SDK 和真实设备上补齐接口、异常码、权限与性能证据。

根因和工程边界

布局可以重建，语义状态必须独立保存。状态至少包括 route、selectedId、列表锚点、编辑草稿和焦点意图；折叠变化先保存快照，再根据窗口尺寸选择布局，最后按能力恢复。像素滚动值不能跨布局直接复用，应优先保存可识别的 itemId 和偏移。

案例一：商品列表从单栏变双栏

保存顶部可见 itemId 和选中项。展开后左栏滚到同一 item，右栏展示选中详情；没有选中项时保持右栏占位。

案例二：编辑表单在折叠时切换

文本草稿先进入 ViewModel，布局重建后恢复内容和错误提示。焦点只在用户仍处于编辑动作时恢复，不能自动弹出键盘打断阅读。

可以独立运行的状态模型

type Snapshot={route:string;selected?:string;anchor?:string;draft?:string};
function restore(s:Snapshot,ids:Set<string>){return {...s,selected:s.selected&&ids.has(s.selected)?s.selected:undefined,anchor:s.anchor&&ids.has(s.anchor)?s.anchor:undefined}}
const r=restore({route:'list',selected:'x',anchor:'a'},new Set(['a']));if(r.selected)throw new Error('失效选中项未清理');

这个小模型只验证应用侧判断，不替代 HarmonyOS 7 真机和目标 SDK。接入平台接口时，应把调用放在模型确定的边界内，并把真实错误码、日志和用户可见结果补进验收记录。

为什么选择这条方案

保存语义锚点比保存绝对像素更能跨断点复用。把全部组件状态序列化虽然省事，却会把临时动画和过期焦点一起恢复。只保存用户能感知且需要连续的状态，恢复失败时给出稳定默认值。

上线前验证清单

验证项	通过标准
折叠展开：选中项不丢	有可重复步骤、日志或可见结果
数据刷新：失效选中项被清理	有可重复步骤、日志或可见结果
列表高度变化：锚点仍可定位	有可重复步骤、日志或可见结果
编辑中切换：草稿不丢	有可重复步骤、日志或可见结果
阅读态切换：不自动弹键盘	有可重复步骤、日志或可见结果

官方资料与证据边界

1. 折叠屏状态与显示信息

2. Pura X Max应用适配

3. HarmonyOS布局基础

可复用结论

先把输入、所有者、生命周期和失败回退写成状态，再接入平台能力。这样出现异常时可以回答“哪一步失败、谁负责释放、用户还能做什么”，而不是靠重复调用掩盖问题。