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包裹——因为内容只有两个元素，不需要滚动。

写在最后

这个优化改动很小——空状态加了一个返回按钮。但它解决了一个真实的用户问题：当商品不存在时，用户不会"被困住"。

交互设计的一个基本原则是：用户永远应该知道"怎么离开"。返回按钮就是这个"出口"。无论页面状态如何，出口都应该存在。