订阅方案选择：推荐标签 + 价格对比 + 选中态

前言“海风日记“的 Premium 订阅页提供月付和年付两种方案年付方案标注“推荐“标签和折扣信息用户点击切换选中态。本文将从源码出发深入讲解订阅方案的选择实现。一、功能对比表Column({ space: 0 }) { Text(免费版 vs Premium).fontSize(15).fontColor(COLOR_TEXT_MAIN).fontWeight(FontWeight.Bold) // 表头 Row() { Text(功能).fontSize(12).fontColor(COLOR_TEXT_HINT).layoutWeight(1) Text(免费).fontSize(12).fontColor(COLOR_TEXT_HINT).width(50) Text(Premium).fontSize(12).fontColor(COLOR_PRIMARY).width(70) } // 对比行 ForEach([无限日记, 云端同步, AI 周报, 自定义主题, 数据导出], (feature, idx) { Row() { Text(feature).fontSize(13).fontColor(COLOR_TEXT_MAIN).layoutWeight(1) Text(idx 2 ? ✓ : —).fontSize(14).fontColor(idx 2 ? COLOR_SUCCESS : COLOR_TEXT_HINT).width(50) Text(✓).fontSize(14).fontColor(COLOR_PRIMARY).width(70) } }) }二、底部解锁按钮Column({ space: 12 }) { Button(立即解锁 Premium) .width(100%).height(52) .fontSize(17).fontColor(#FFFFFF).fontWeight(FontWeight.Bold) .linearGradient({ angle: 90, colors: [[#FF8C00, 0], [COLOR_PRIMARY, 1]] }) .borderRadius(BTN_RADIUS_FULL) .shadow({ radius: 12, color: rgba(245,166,35,0.35), offsetY: 4 }) Row({ space: 16 }) { Text(服务条款).fontSize(11).fontColor(COLOR_TEXT_HINT) Text(隐私政策).fontSize(11).fontColor(COLOR_TEXT_HINT) Text(恢复购买).fontSize(11).fontColor(COLOR_TEXT_HINT) } }三、总结本文通过“海风日记“的 Premium 订阅页深入讲解了订阅方案和对比表的实现功能对比表表头 对比行底部解锁按钮渐变 阴影服务条款底部链接价格对比月付 vs 年付下一篇文章将深入讲解ImageViewerPage 图片查看器敬请期待。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源LinearGradient 文档Shadow 属性文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区