前言渐变是提升 UI 视觉品质的重要手段。HarmonyOS 提供了LinearGradient和RadialGradient两种渐变方式支持多色阶、角度控制等高级功能。“海风日记“以“日落海景“为设计灵感围绕暖金、琥珀、橙色的渐变体系建立了完整的品牌视觉语言。全项目共有 10 处使用了 LinearGradient 渐变。本文将从源码出发深入讲解 LinearGradient 的完整用法。一、LinearGradient 概述1.1 基本语法Column() .linearGradient({ angle: 160, // 渐变角度度 colors: [ // 色阶数组 [#FFE4B0, 0.0], // [色值, 位置] 0% 位置 [#FFD080, 0.35], // 35% 位置 [#F5A623, 0.70], // 70% 位置 [#C8800A, 1.0], // 100% 位置 ] })1.2 参数说明参数类型说明是否必填anglenumber渐变角度度0 为从左到右90 为从上到下否colors[string, number][]色阶数组每个元素为[色值, 位置]是directionGradientDirection渐变方向枚举与 angle 二选一否1.3 指定方向的方式方式一使用 angle 角度angle: 0 // 从左到右 angle: 90 // 从上到下 angle: 160 // 从左上到右下 angle: 180 // 从下到上 angle: 270 // 从右到左方式二使用 direction 枚举import { GradientDirection } from kit.ArkUI .direction(GradientDirection.TopToBottom) // 从上到下 .direction(GradientDirection.LeftToRight) // 从左到右 .direction(GradientDirection.BottomToTop) // 从下到上 .direction(GradientDirection.RightToLeft) // 从右到左二、海风日记的渐变体系2.1 闪屏页渐变4 色阶Column() .linearGradient({ angle: 160, colors: [ [#FFE4B0, 0.0], // 浅金 [#FFD080, 0.35], // 暖金 [#F5A623, 0.70], // 品牌橙 [#C8800A, 1.0], // 琥珀 ] })2.2 WaveHeaderBand 渐变6 色阶Column() .linearGradient({ angle: 180, colors: [ [COLOR_HEADER_TOP, 0], // 淡橙 [#FFE0B0, 0.2], // 浅金 [#FFE8C8, 0.4], // 暖金 [#FFF0D8, 0.65], // 米白 [#FFF6EC, 0.82], // 暖白 [COLOR_HEADER_BOTTOM, 1.0] // 页面背景色 ] })2.3 写日记页渐变3 色阶Column() .linearGradient({ angle: 160, colors: [ [COLOR_HEADER_TOP, 0.0], // 淡橙 [#FFE0B0, 0.6], // 暖金 [COLOR_HEADER_BOTTOM, 1.0] // 页面背景色 ] })2.4 项目中的渐变场景统计渐变场景色阶数角度起始色结束色闪屏页背景4160°#FFE4B0#C8800AWaveHeaderBand6180°#FFD4A0#FAFAF7写日记页头部3160°#FFD4A0#FAFAF7日历页头部2180°#FFD4A0#FAFAF7个人中心头部3160°#FFD4A0#FAFAF7日记详情页头部3150°#FFD4A0#FFE8C0Premium 页 Banner3160°#FF8C00#FFD47A存储进度条290°#FFD4A0#F5A623三、渐变与品牌色系统3.1 品牌色令牌// Colors.ets — 渐变相关颜色令牌 export const COLOR_HEADER_TOP #FFD4A0 export const COLOR_HEADER_MID #FFE8C8 export const COLOR_HEADER_BOTTOM #FAFAF7 export const COLOR_PRIMARY #F5A623 export const COLOR_PRIMARY_LIGHT #FFBE45 export const COLOR_PRIMARY_DEEP #D4900A export const COLOR_AMBER #C8956A3.2 颜色渐变阶梯闪屏页渐变阶梯从亮到暗 #FFE4B0 (浅金) → #FFD080 (暖金) → #F5A623 (品牌橙) → #C8800A (琥珀) 头部渐变阶梯从亮到背景色 #FFD4A0 (淡橙) → #FFE0B0 (浅金) → #FFE8C8 (暖金) → #FFF0D8 (米白) → #FFF6EC (暖白) → #FAFAF7 (背景)3.3 渐变与品牌一致性设计原则实现方式效果统一色板所有渐变使用同一组颜色令牌视觉一致性统一角度多数使用 160° 或 180° 角度方向统一渐变过渡渐变的结束色与页面背景色一致无缝过渡多色阶3-6 色阶确保渐变平滑层次丰富四、LinearGradient 的高级用法4.1 与 Shadow 结合Column() .linearGradient({ angle: 135, colors: [[COLOR_HEADER_TOP, 0.0], [#FFCC70, 0.6], [#F5A623, 1.0]] }) .shadow({ radius: 20, color: rgba(245,166,35,0.30), offsetY: 6 })4.2 渐变进度条Stack({ alignContent: Alignment.Start }) { // 背景条 Row().height(6).width(100%) .backgroundColor(rgba(200,180,140,0.18)) .borderRadius(3) // 渐变进度条 Row().height(6).width(9%) .linearGradient({ angle: 90, colors: [[COLOR_HEADER_TOP, 0], [COLOR_PRIMARY, 1]] }) .borderRadius(3) }4.3 渐变按钮Button(立即解锁 Premium) .width(100%).height(52) .linearGradient({ angle: 90, colors: [[#FF8C00, 0], [COLOR_PRIMARY, 1]] }) .borderRadius(BTN_RADIUS_FULL)五、LinearGradient 与 RadialGradient 的对比5.1 RadialGradient 径向渐变Column() .radialGradient({ center: [50%, 50%], // 中心点 radius: 50%, // 半径 colors: [ [rgba(245,166,35,0.22), 0.0], [rgba(245,166,35,0.0), 1.0] ] })5.2 两种渐变的对比对比维度LinearGradientRadialGradient渐变方向线性方向径向发散适用场景背景、按钮、进度条光晕、发光效果参数angle colorscenter radius colors视觉效果平面过渡立体光晕六、渐变性能优化6.1 色阶数量控制// 推荐3-6 个色阶即可获得平滑渐变 colors: [[#FFE4B0, 0], [#FFD080, 0.35], [#F5A623, 0.70], [#C8800A, 1.0]] // 避免过多色阶影响性能 colors: [[#FFE4B0, 0], [#FFE6B5, 0.1], [#FFE8BA, 0.2], ...] // 不推荐6.2 避免频繁更新渐变渐变属性变化会触发重绘应避免在动画循环中更新渐变。七、常见问题与排查7.1 渐变不显示问题设置了linearGradient但渐变效果不显示。原因容器没有设置宽高或渐变被其他颜色覆盖。解决方案Column() .width(100%).height(100%) // 必须设置宽高 .linearGradient({...}) // 渐变才能显示7.2 渐变颜色断层问题渐变颜色过渡不平滑出现颜色断层。原因色阶之间的颜色差异过大或色阶数量不足。解决方案增加色阶数量使颜色过渡更平滑。总结本文通过“海风日记“的渐变体系深入讲解了 LinearGradient 的完整用法基本语法angle、colors 参数配置渐变体系闪屏、头部、写日记页等不同场景的渐变设计品牌色系统颜色令牌与渐变的一致性管理高级用法渐变与阴影、进度条、按钮的结合性能优化色阶数量控制、避免频繁更新下一篇文章将深入讲解Swiper 轮播组件实现新用户引导页敬请期待。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源LinearGradient API 文档RadialGradient API 文档ArkUI 颜色管理海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区GradientDirection 枚举Shadow 属性文档
