HarmonyOS 购物商城：详情页返回键优化
HarmonyOS 购物商城：详情页返回键优化
一个空状态的返回按钮，解决了用户被"困住"的问题。
前言
上一篇写商品详情页时，我提到了一个问题：当商品 ID 无效时，页面显示"商品不存在"，但没有返回按钮——用户被"困住"了，只能按系统返回键。
这次优化解决了这个问题：空状态也加了返回按钮。改动很小，但涉及一个常见的交互设计原则。
完整效果
唯一差异：空状态加返回按钮
上一版
if(!this.product){Column(){Text('商品不存在').fontSize(16).fontColor(T2)}.width('100%').height('100%').justifyContent(FlexAlign.Center)}空状态只有一个居中的"商品不存在"文字，没有任何导航元素。
本版
if(!this.product){Column(){Row(){Row(){SymbolGlyph($r('sys.symbol.chevron_left')).fontSize(20).fontColor([T1])}.width(36).height(36).borderRadius(18).backgroundColor('rgba(0,0,0,0.03)').justifyContent(FlexAlign.Center).onClick(()=>{router.back()})Blank()}.width('100%').padding({left:16,right:16,top:12})Blank()Text('商品不存在').fontSize(16).fontColor(T2)}.width('100%').height('100%')}空状态顶部加了返回按钮——和详情页正常状态的返回按钮样式一致：36×36 圆形、浅灰背景、左箭头图标。
其他微调
图片区按钮层级
// 上一版Row(){// 返回按钮Blank()// 分享按钮}.width('100%').padding(...)Text(this.product.image)...// 图片在按钮之后// 本版Text(this.product.image)...// 图片先渲染Row(){// 返回按钮Blank()// 分享按钮}.width('100%').padding(...).position({x:0,y:0})// 新增 position图片元素移到按钮之前渲染，按钮行新增了.position({ x: 0, y: 0 })。
为什么调整渲染顺序？
Stack 中后渲染的元素会覆盖先渲染的。上一版图片在按钮之后渲染——理论上图片会遮挡按钮。但实际上不会，因为图片是 120px emoji 居中显示，按钮在顶部两侧，没有重叠。
本版把图片移到前面，按钮用.position({ x: 0, y: 0 })固定在左上角。这样即使图片尺寸变化（比如换成更大的图），按钮也不会被遮挡。
设计原则：永远给用户一条"退路"
这个优化的核心不是代码技巧，而是一个交互设计原则：永远不要让用户"困住"。
空状态、错误状态、加载失败——无论什么情况，用户都应该能返回上一页。系统返回键是一个兜底方案，但不是最好的方案——用户需要知道"按哪里能回去"。
在空状态加一个显眼的返回按钮，比依赖系统返回键好得多。用户不需要思考"这个页面怎么退出"，一眼就能看到出口。
同样的原则适用于：
- 404 页面
- 网络错误页面
- 权限不足页面
- 搜索无结果页面
踩坑记录
1. 空状态的布局结构
Column(){Row(){...返回按钮...}// 顶部Blank()// 中间留白Text('商品不存在')// 居中文字}用Blank()把"商品不存在"推到中间。如果不用Blank()，文字会紧跟在返回按钮下面，不在屏幕中央。
2. 返回按钮的背景色差异
正常状态的返回按钮背景是'rgba(255,255,255,0.9)'（半透明白色），空状态是'rgba(0,0,0,0.03)'（极淡灰色）。
为什么不一样？正常状态下返回按钮浮在图片上方——半透明白色让按钮和图片有对比。空状态没有图片——白色按钮在白色背景上看不到，所以用极淡灰色。
3. 空状态没有底部操作栏
空状态只有返回按钮和提示文字，没有底部操作栏（客服/收藏/加购/购买）。这是对的——商品都不存在了，操作栏没有意义。
但空状态也没有Scroll包裹——因为内容只有两个元素，不需要滚动。
写在最后
这个优化改动很小——空状态加了一个返回按钮。但它解决了一个真实的用户问题：当商品不存在时，用户不会"被困住"。
交互设计的一个基本原则是：用户永远应该知道"怎么离开"。返回按钮就是这个"出口"。无论页面状态如何，出口都应该存在。