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日

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

更多资讯

JavaWeb过滤器Filter实战：统一处理编码、登录校验与日志记录

大型包膜机西门子PLC控制程序设计与FB块封装实战解析

Flipper Zero中文显示改造指南：4步完成本地化避坑

Flask与Django选型实战：从零构建服装生产管理系统的完整方案

2026年国产电脑监控软件选型指南：信创适配、数据安全与合规审计全解析

AI落地若依框架：从选型到权限审计的完整实战指南

今日更新

CopilotKit Vue Demo 与 React Demo 的 Parity 实现指南：路由、运行时端点与交互语义的全框架对齐

Harbor RBAC 实战：db_auth 模式下非管理员用户管理项目成员的完整验证与权限模型解析

STM32平衡车纯平衡程序从拆包到参数整定的完整调试指南

本周精选

超人会飞不算本事：系统稳定依赖清晰规则与边界设计

超人VS蜘蛛侠：拆解超级IP的影响力与传播方法论

基于CNN的调制信号识别：MATLAB实现时频图分类实战

本月热门

基于YOLO的焊缝缺陷检测：从数据标注到工业部署全流程实践

分布式服务的决策记录

创业产品的首版范围

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