HarmonyOS应用开发实战：猫猫大作战-`linearGradient` 的方向、色标、透明度、与纯色底切换的取舍

前言主菜单的「浅蓝渐变」背景是用户第一眼的高级感来源——从顶部#E8F4F8浅蓝过渡到底部#C9E8F2略深蓝整屏铺色不刺眼。在 HarmonyOS 里渐变背景靠linearGradient线性渐变、sweepGradient角度渐变、radialGradient径向渐变三个属性完成其中linearGradient最常用。本篇以「猫猫大作战」主菜单的浅蓝渐变背景为锚点把linearGradient的方向、色标、透明度、与纯色底切换的取舍讲透。读完本篇你将能独立写出顶到底渐变、左到右渐变、三色标渐变、透明渐变叠背景图四种背景套路。提示本系列不讲 ArkTS 基础语法与环境搭建假设你已跟完第 1–5 篇。一、场景拆解主菜单渐变背景规格打开entry/src/main/ets/pages/Index.ets的MainMenuView找到外层Column的背景// 来源entry/src/main/ets/pages/Index.ets MainMenuView() Column() { // ... 标题、按钮、规则面板 } .width(100%).height(100%) .linearGradient({ direction: GradientDirection.Bottom, colors: [[#E8F4F8, 0.0], [#D6EEF5, 0.5], [#C9E8F2, 1.0]] }) .alignItems(HorizontalAlign.Center)渐变规格拆解维度取值作用方向GradientDirection.Bottom从顶到底色标 1[#E8F4F8, 0.0]起点顶部浅蓝色标 2[#D6EEF5, 0.5]中点略深蓝色标 3[#C9E8F2, 1.0]终点底部最深蓝关键经验色标位置0.0/0.5/1.0表示在渐变方向的 0%/50%/100% 处达到该色。三色标比两色标过渡更柔和因为多了「中点缓冲」。二、linearGradient 属性结构linearGradient({ angle?: number | string, // 角度与 direction 二选一 direction?: GradientDirection, // 方向枚举 colors: Array[ResourceColor, number], // 色标数组 repeating?: boolean // 是否重复 })2.1 方向direction八枚举枚举渐变方向视觉Top底→顶上深下浅Bottom顶→底上浅下深本项目Left右→左左深右浅Right左→右左浅右深TopLeft右下→左上角斜TopRight左下→右上角斜BottomLeft右上→左下角斜BottomRight左上→右下角斜关键易错GradientDirection.Bottom是「从顶到底」不是「从底到顶」。色标数组第一个[color, 0.0]在渐变方向的起点——即Bottom方向时0.0在顶部。2.2 angle 自定义角度不用direction用angle自定义渐变角度.linearGradient({ angle: 135, // 135 度从左上到右下 colors: [[#E8F4F8, 0.0], [#C9E8F2, 1.0]] })角度规则0° 顶到底90° 左到右180° 底到顶270° 右到左。顺时针递增。何时用 angle斜向渐变用direction的 4 个角斜够不到时如 30° 微斜。2.3 colors 色标数组colors: [[#E8F4F8, 0.0], [#D6EEF5, 0.5], [#C9E8F2, 1.0]]每个色标是[颜色, 位置]元组颜色string#RRGGBB或rgba(...)或Color枚举或$r(app.color.xxx)。位置0.0–1.0表示在渐变方向的百分比。关键经验最少 2 个色标起止必须都有。位置不必均匀[[c1, 0.0], [c2, 0.3], [c3, 1.0]]也合法前段挤后段舒。位置可省略省略时按色标数量均分但显式写位置更可控。三、实战 1顶到底三色标渐变本项目写法.linearGradient({ direction: GradientDirection.Bottom, colors: [[#E8F4F8, 0.0], [#D6EEF5, 0.5], [#C9E8F2, 1.0]] })三色标 vs 两色标的视觉差异写法视觉两色标[[c1, 0], [c3, 1]]线性过渡中段稍生硬三色标[[c1, 0], [c2, 0.5], [c3, 1]]中段缓冲过渡更柔和何时用三色标渐变跨色相大如蓝→紫→红时必用跨色相小如浅蓝→深蓝可两色标。四、实战 2左到右深浅渐变登录页常用「左浅右深」的横向渐变营造阅读引导Column() { Text(用户名).fontSize(16) TextInput({ placeholder: 请输入用户名 }).margin({ bottom: 16 }) Text(密码).fontSize(16) TextInput({ placeholder: 请输入密码, type: InputType.Password }) Button(登录).margin({ top: 24 }) } .width(100%).height(100%).padding(32) .linearGradient({ direction: GradientDirection.Right, colors: [[#F8F9FA, 0.0], [#E9ECEF, 1.0]] }) .alignItems(HorizontalAlign.Start)左浅右深让视觉重心向右按钮侧倾斜潜意识引导用户「往右走」→ 按钮在那。五、实战 3透明渐变叠背景图要渐变 图片底用rgba透明色标 backgroundImage叠Column() { Text(游戏标题).fontSize(36).fontColor(Color.White) } .width(100%).height(100%) .backgroundImage($r(app.media.bg_pattern)) .backgroundImageSize(ImageSize.Cover) .linearGradient({ direction: GradientDirection.Bottom, colors: [ [rgba(44, 62, 80, 0.8), 0.0], // 顶深半透 [rgba(44, 62, 80, 0.4), 0.5], // 中浅半透 [rgba(44, 62, 80, 0.7), 1.0] // 底深半透 ] }) .alignItems(HorizontalAlign.Center) .justifyContent(FlexAlign.Center)关键点rgba第四参数是透明度0 全透1 不透。渐变里用 0.4–0.8 让底图隐约可见。backgroundImagelinearGradient同时设图片在下层渐变叠上层。如果渐变全不透#RRGGBB底图被完全遮。backgroundImageSizeCover铺满不失真Contain完整显示有黑边Auto原始尺寸。提示本系列第 27 篇会专讲Image与backgroundImage的取舍——前者是组件有交互后者是属性无交互。六、实战 4repeating 重复渐变.linearGradient({ direction: GradientDirection.Bottom, colors: [[#E8F4F8, 0.0], [#C9E8F2, 0.2], [#E8F4F8, 0.4]], repeating: true })repeating: true让色标 0–0.4 的渐变重复铺满做出条纹背景。每 40% 屏高一个渐变循环。何时用条纹纹理、进度条刻度、加载动画背景。主菜单不适合太花。七、sweepGradient 与 radialGradient 速览7.1 sweepGradient 角度渐变.sweepGradient({ center: [50%, 50%], // 中心点 start: 0, // 起始角度 end: 360, // 终止角度 colors: [[#E74C3C, 0.0], [#F39C12, 0.5], [#2ECC71, 1.0]] })从中心点向外绕圈渐变圆形元素用得多如圆形进度条、雷达图。7.2 radialGradient 径向渐变.radialGradient({ center: [50%, 50%], radius: 50%, colors: [[#FFFFFF, 0.0], [#000000, 1.0]] })从中心点向外圆形扩散聚光灯效果、** vignette 暗角**用得多。主菜单用linearGradient而非另两种因为全屏背景是线性渐变最自然的场景——角度/径向渐变更适合圆形元素。八、完整代码四种渐变背景对比8.1 主菜单浅蓝三色标本项目.linearGradient({ direction: GradientDirection.Bottom, colors: [[#E8F4F8, 0.0], [#D6EEF5, 0.5], [#C9E8F2, 1.0]] })8.2 登录页左到右浅灰.linearGradient({ direction: GradientDirection.Right, colors: [[#F8F9FA, 0.0], [#E9ECEF, 1.0]] })8.3 游戏页深色叠底图.backgroundImage($r(app.media.bg_pattern)) .backgroundImageSize(ImageSize.Cover) .linearGradient({ direction: GradientDirection.Bottom, colors: [ [rgba(44, 62, 80, 0.8), 0.0], [rgba(44, 62, 80, 0.4), 0.5], [rgba(44, 62, 80, 0.7), 1.0] ] })8.4 加载页斜向 30°.linearGradient({ angle: 30, colors: [[#667eea, 0.0], [#764ba2, 1.0]] })九、调试技巧渐变怎么调临时加 border.border({ width: 1, color: Color.Red })看清容器边界确认渐变铺满。色标位置验证把渐变方向临时改成Right色标位置 0/0.5/1 在水平方向更直观。真机看渐变DevEco 预览器渐变渲染接近真机但透明渐变叠图可能差异以真机为准。backgroundImagevslinearGradient顺序两者同时设时图片先铺渐变叠上。如果渐变不透底图被遮——调透明色标解决。十、性能与最佳实践linearGradient比纯backgroundColor略重渐变需色标插值计算纯色无。性能敏感区域如长列表项慎用渐变。色标别超过 5 个3 个最甜5 个是上限再多视觉看不出差异还耗性能。透明渐变叠图避免大图backgroundImage大图 渐变重绘列表项会卡。本系列第 192 篇会讲内存优化。repeating布尔默认false不写就是不重复主菜单不重复。总结本篇我们从主菜单浅蓝渐变切入掌握linearGradient的direction、angle、colors、repeating四大要点并速览了sweepGradient与radialGradient的适用场景。核心要点Bottom是顶到底非底到顶三色标比两色标柔透明渐变叠图用 rgba列表项慎用渐变。下一篇我们将继续主菜单拆解justifyContent与alignItems双轴对齐的完整套路。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源「猫猫大作战」项目源码本仓库entry/src/main/ets/pages/Index.ets渐变背景官方指南linearGradient API 参考GradientDirection 枚举开源鸿蒙跨平台社区HarmonyOS 开发者官方文档首页系列索引本仓库articles/INDEX.md