前言“海风日记“的“我的“页面中Premium 推广卡片以金色边框和阴影突出显示引导用户开通高级订阅。本文将从源码出发深入讲解 Premium 推广卡片的实现。一、Premium 卡片Row({ space: 16 }) { Column({ space: 4 }) { Row({ space: 6 }) { Text(✨).fontSize(16) Text(海风 Premium).fontSize(14).fontColor(#C8800A).fontWeight(FontWeight.Bold) } Text(解锁无限存储 · AI 周报 · 主题皮肤) .fontSize(12).fontColor(COLOR_TEXT_SECONDARY) } .layoutWeight(1).alignItems(HorizontalAlign.Start) Button(立即开通) .height(32).fontSize(13).fontColor(#FFFFFF).fontWeight(FontWeight.Bold) .backgroundColor(COLOR_PRIMARY).borderRadius(BTN_RADIUS_FULL) .padding({ left: 14, right: 14 }) .onClick(() { router.pushUrl({ url: pages/premium/PremiumPage }) }) } .padding(PAGE_PADDING) .backgroundColor(COLOR_CARD_BG) .borderRadius(CARD_RADIUS) .border({ width: 1, color: rgba(245,166,35,0.20) }) .shadow({ radius: 12, color: rgba(245,166,35,0.12), offsetY: 3 })二、设置菜单分组2.1 菜单数据interface MenuItemData { icon: Resource label: string url: string danger?: boolean } interface MenuGroup { title: string items: MenuItemData[] }2.2 菜单渲染ForEach(this.menuGroups, (group: MenuGroup) { Column({ space: 0 }) { Text(group.title).fontSize(12).fontColor(COLOR_TEXT_HINT) .padding({ left: PAGE_PADDING, bottom: 6 }) Column() { ForEach(group.items, (item: MenuItemData, idx: number) { Row({ space: 12 }) { SymbolGlyph(item.icon).fontSize(18).fontColor([item.danger ? #D06060 : COLOR_AMBER]) Text(item.label).fontSize(15) .fontColor(item.danger ? #D06060 : COLOR_TEXT_MAIN).layoutWeight(1) SymbolGlyph($r(sys.symbol.chevron_right)).fontSize(14).fontColor([COLOR_TEXT_HINT]) } .width(100%).height(50) .padding({ left: PAGE_PADDING, right: PAGE_PADDING }) .onClick(() router.pushUrl({ url: item.url })) }) } .backgroundColor(COLOR_CARD_BG).borderRadius(CARD_RADIUS) .shadow({ radius: 8, color: rgba(160,120,60,0.06), offsetY: 2 }) } })三、总结本文通过“海风日记“的 MineTab 设置菜单深入讲解了分组菜单的实现菜单分组数据接口定义ForEach 渲染分组 菜单项SymbolGlyph 图标每个菜单项点击跳转router.pushUrl危险项红色标识下一篇文章将深入讲解ProfileInfoPage 个人信息编辑敬请期待。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源ForEach 文档SymbolGlyph 文档Router 路由文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区
