HarmonyOS7 渐变样式菜单：用 linearGradient 做好视觉菜单-北京尧图网络

文章目录前言案例效果和学习目标从布局读到状态重点代码解释完整代码我的小建议前言这组案例开始进入选择类和调节类组件写业务页面时会经常遇到。这个案例围绕自定义样式菜单展开重点不是把属性背下来而是弄清楚状态、组件和用户操作之间怎么连起来。这篇我会把重点放在样式设计上尽量说清楚它在真实页面里有什么用。案例效果和学习目标如果把它放到真实项目里常见位置可能是设置页、筛选页、编辑页或者某个需要快速操作的工具面板。用户点一下、选一下、拖一下页面就应该给出明确反馈。维度内容案例主题自定义样式菜单核心 APIlinearGradient使用场景视觉菜单文章侧重点样式设计从布局读到状态代码结构可以按三层读外层负责页面背景和留白中间卡片承载主要内容内部组件处理具体交互。这样的层级不花哨但维护起来比较舒服。我比较推荐先把状态字段命名清楚。选中项、开关状态、滑块数值最好都能从名字看出用途比随手写flag、value后面省心很多。重点代码解释先看一段连续代码基本能判断这个案例的运行方式。它包含入口组件、状态字段以及一部分核心 UI。EntryComponentstruct StyledGradientMenu{StateisShow:booleantrueStateisMenuOpen:booleanfalsebuild(){Column(){if(this.isShow){Column({space:14}){Text(自定义样式菜单).fontSize(14).fontColor(THEME_COLOR).fontWeight(600)Button(自定义).fontSize(15).fontColor(#FFFFFF).linearGradient({direction:GradientDirection.Right,colors:[[#FF6B9D,0],[#9B59B6,1]]}).borderRadius(22).width(60%).height(44).onClick((){this.isMenuOpentrue}).bindMenu(this.isMenuOpen,[{value:★ 收藏,action:(){}},这段代码可以拆成几块看State保存当前页面状态用户操作之后会触发 UI 更新。linearGradient是案例的关键入口真正的行为通常由它和事件回调一起完成。布局属性服务于业务表达选中、禁用、拖动这些状态最好都能在视觉上看出来。完整代码下面是整理后的完整代码。组件名已经改成StyledGradientMenu共享颜色也内置到当前文件里单独复制出来读会更方便。constPAGE_BG_COLOR:string#F5F6FAconstCARD_BG_COLOR:string#FFFFFFconstTHEME_COLOR:string#4D96FFconstSUBTEXT_COLOR:string#8A8A8AEntryComponentstruct StyledGradientMenu{StateisShow:booleantrueStateisMenuOpen:booleanfalsebuild(){Column(){if(this.isShow){Column({space:14}){Text(自定义样式菜单).fontSize(14).fontColor(THEME_COLOR).fontWeight(600)Button(自定义).fontSize(15).fontColor(#FFFFFF).linearGradient({direction:GradientDirection.Right,colors:[[#FF6B9D,0],[#9B59B6,1]]}).borderRadius(22).width(60%).height(44).onClick((){this.isMenuOpentrue}).bindMenu(this.isMenuOpen,[{value:★ 收藏,action:(){}},{value:♡ 点赞,action:(){}},{value:✎ 编辑,action:(){}},{value:⚙ 设置,action:(){}},{value:ⓘ 关于,action:(){}},{value:Close 删除,action:(){}}],{onDisappear:(){this.isMenuOpenfalse}})Text(菜单项支持自定义文本和图标).fontSize(12).fontColor(SUBTEXT_COLOR)}.width(100%).alignItems(HorizontalAlign.Center).padding(16).backgroundColor(CARD_BG_COLOR).borderRadius(12)}Text(渐变样式菜单Menu 自定义样式渐变触发器自定义菜单项).fontSize(12).fontColor(SUBTEXT_COLOR).margin({top:12})}.width(100%).height(100%).backgroundColor(PAGE_BG_COLOR).padding(16)}}我的小建议继续扩展的话我会把静态选项抽成接口返回的数据再补上空状态和异常状态。示例页面先把核心交互跑通就够了到了业务页面状态边界才是真正容易出问题的地方。

HarmonyOS7 渐变样式菜单：用 linearGradient 做好视觉菜单

相关推荐

每日安全情报报告 · 2026-07-19

每日极客日报 · 2026年07月19日

浏览器资源嗅探技术深度解析：猫抓插件的架构与应用实践

更多资讯

红本中级电工证含金量高吗？怕考不过白交培训费的别错过

织金技校办电工证怎么考官方报名入口在哪找

顺庆区考电工证怎么过实操考试？官方报名入口全攻略来了

绵阳办电工证在哪里办多少钱最划算

木工瓦工不是特种工吗上岗必备的真相和转证攻略

三级电工证资料全攻略：证书过期了不知道怎么复审延期？电子证书怎么查？

今日更新

金坛办电工证在哪里？考前押题能帮你少走弯路

怎样查看真假电工证怎么考

史密斯内部电工证值不值得考？怕考不过白交培训费的看过来

本周精选

安监局电工证分数查询怎么查才能知道含金量高不高

新疆电工作业干活累吗良心建议助你避开考不过的坑

中牟县电工证怎么报名外省证能转吗

本月热门

面向复杂光照与角度的宠物面部识别鲁棒性增强策略

基于DRV8818与STM32的双极步进电机驱动方案实战解析

DRV8818PWPR+PIC18F45K80双极步进电机控制方案实战

读完文章，想聊聊您的网站？