HarmonyOS7 优惠券卡片怎么写得清楚：ArkUI/ArkTS 实战拆解

文章目录前言为什么这个问题经常被写乱从一个可领优惠券卡片开始实操步骤把关键代码一段段拆开优惠券卡片先让用户看懂成本写在最后前言优惠券卡片最怕信息堆在一起金额很大但门槛看不清按钮很醒目但用户不知道是否已领取。HarmonyOS7 里写这个页面我更关心信息顺序和状态表达。这篇单独聊优惠券这个场景。重点不是堆 API而是把金额、门槛、有效期和领取态拆清楚让一张卡片能支撑真实领取流程。为什么这个问题经常被写乱优惠券卡片怎么写得清楚 这类内容很容易被写成“代码能跑就算讲完了”但对初学者来说这恰恰是最不够的地方。真正让人卡住的往往不是某个组件名记不住而是不知道这段代码为什么要这样拆、状态为什么要这样放、以后需求变化时应该从哪里改。所以这篇文章不只想给你一个能跑的例子更想把背后的判断过程讲清楚。你只要把这个判断过程吃透后面自己改页面、补需求、查问题时心里会稳很多。从一个可领优惠券卡片开始优惠券不是普通卡片它的信息优先级很固定优惠力度最大、门槛其次、有效期和动作按钮最后。我不建议一上来就追求花边样式先把信息读起来不费劲。实操步骤把金额、门槛、有效期、状态拆成字段不要把整段优惠描述塞进title。领取、已领取、已过期分别控制按钮状态。卡片左右两侧用Row分区金额区固定宽度说明区自适应。状态标签只作为辅助不要和按钮文案重复。字段示例说明amount30页面重点字号最大threshold满 199 可用决定用户是否理解成本expireAt07-31靠近按钮展示statusavailable控制按钮和透明度优惠券卡片做得清楚比做得“像票券”更重要。用户扫一眼能不能判断值不值得领才是核心。interfaceCouponItem{id:numberamount:numberthreshold:stringexpireAt:stringstatus:string}EntryComponentstruct CouponListPage{Statecoupons:CouponItem[][{id:1,amount:30,threshold:满 199 可用,expireAt:07-31 到期,status:available},{id:2,amount:12,threshold:满 59 可用,expireAt:07-18 到期,status:received},{id:3,amount:8,threshold:无门槛,expireAt:已过期,status:expired}]privatereceive(id:number){this.couponsthis.coupons.map((item:CouponItem){if(item.ididitem.statusavailable){return{id:item.id,amount:item.amount,threshold:item.threshold,expireAt:item.expireAt,status:received}}returnitem})}build(){Column({space:12}){Text(可用优惠券).fontSize(22).fontWeight(FontWeight.Bold)ForEach(this.coupons,(coupon:CouponItem){Row({space:14}){Column(){Text(¥).fontSize(14).fontColor(#D92D20)Text(coupon.amount.toString()).fontSize(34).fontWeight(FontWeight.Bold).fontColor(#D92D20)}.width(82).alignItems(HorizontalAlign.Center)Column({space:6}){Text(coupon.threshold).fontSize(16).fontWeight(FontWeight.Medium)Text(coupon.expireAt).fontSize(12).fontColor(#777777)Text(coupon.statusexpired?不可用:线上订单可用).fontSize(12).fontColor(#9A6A00)}.alignItems(HorizontalAlign.Start).layoutWeight(1)Button(coupon.statusavailable?领取:coupon.statusreceived?已领取:已过期).width(78).height(34).fontSize(13).enabled(coupon.statusavailable).onClick(()this.receive(coupon.id))}.padding(14).opacity(coupon.statusexpired?0.45:1).backgroundColor(#FFFFFF).borderRadius(10)},(coupon:CouponItem)coupon.id.toString())}.padding(16).backgroundColor(#F7F3EE).height(100%)}}把关键代码一段段拆开receive()用map返回新数组状态更新更明确也方便后面接接口回滚。金额区固定width(82)避免不同金额把右侧说明挤乱。enabled()和按钮文案同时由status控制不会出现“已过期还能点”的尴尬。opacity()只弱化过期券已领取仍然保持可读方便用户核对。优惠券卡片先让用户看懂成本优惠券页面里金额当然要醒目但真正影响用户决策的是使用门槛。30 元如果必须满199才能用就不能只把金额做大门槛和有效期也要放在用户扫一眼能看到的位置。示例把金额区固定宽度是为了让不同面额的卡片仍然对齐。右侧说明区域用来放门槛、有效期和使用范围按钮则只表达当前动作能领、已领或已过期。状态越清楚用户越少反复点按钮试探。写在最后接领取接口时可以先把status乐观改成received失败后再恢复也可以等接口成功后再更新。无论哪种方式都要保证按钮文案、禁用态和卡片透明度来自同一个status不要让视觉状态和业务状态分家。