前言在 UI 设计中光晕效果可以为元素添加视觉点缀增强层次感和品牌调性。HarmonyOS 提供了RadialGradient径向渐变 API用于创建从中心向四周扩散的渐变效果。“海风日记“的首页通过 RadialGradient 为日期数字添加了径向光晕让数字看起来更加醒目和富有层次感。本文将从源码出发深入讲解 RadialGradient 的完整用法。一、RadialGradient 概述1.1 基本语法Column() .radialGradient({ center: [50%, 50%], // 中心点位置 radius: 50%, // 渐变半径 colors: [ [rgba(245,166,35,0.22), 0.0], // 中心色橙色透明度 22% [rgba(245,166,35,0.0), 1.0] // 边缘色透明 ] })1.2 参数说明参数类型说明示例center[string, string]渐变中心点[50%, 50%]radiusstring渐变半径50%colors[string, number][]色阶数组[[#FFF, 0], [#000, 1]]二、首页日期光晕实现2.1 源码// 大日期数字带径向光晕 Stack({ alignContent: Alignment.Center }) { // 光晕层 Column() .width(64) .height(64) .borderRadius(32) .radialGradient({ center: [50%, 50%], radius: 50%, colors: [ [rgba(245,166,35,0.22), 0.0], // 中心橙色光晕 [rgba(245,166,35,0.0), 1.0] // 边缘透明 ] }) // 数字层 Text(new Date().getDate().toString()) .fontSize(52) .fontColor(#2D2926) .fontWeight(FontWeight.Bolder) .lineHeight(52) }2.2 视觉效果┌──────────────────┐ │ ┌──────────┐ │ │ │ 橙色光晕 │ │ ← 中心亮边缘淡 │ │ 17 │ │ ← 数字叠加在光晕上 │ └──────────┘ │ └──────────────────┘三、RadialGradient 与 LinearGradient 的对比3.1 对比表格对比维度RadialGradientLinearGradient渐变方向从中心向外扩散线性方向参数center radiusangle视觉圆形光晕平面过渡适用场景发光效果、光晕背景、按钮3.2 选择指南需要光晕/发光效果→ 使用RadialGradient需要背景过渡→ 使用LinearGradient四、RadialGradient 的实际应用4.1 按钮光晕Button() .radialGradient({ center: [50%, 50%], radius: 50%, colors: [[rgba(255,255,255,0.15), 0], [rgba(255,255,255,0), 1]] })4.2 头像光晕Circle() .width(72).height(72) .fill(#FFE4B0) .shadow({ radius: 12, color: rgba(245,166,35,0.25) })五、性能优化5.1 透明度控制// 中心透明度 22%边缘 0% colors: [ [rgba(245,166,35,0.22), 0.0], // 中心 [rgba(245,166,35,0.0), 1.0] // 边缘 ]六、常见问题与排查6.1 渐变不显示问题设置了radialGradient但渐变效果不显示。原因容器没有设置宽高或渐变被其他元素覆盖。解决方案确保容器设置了明确的宽高。总结本文通过“海风日记“首页日期数字的径向光晕深入讲解了 RadialGradient 的用法基本语法center、radius、colors 参数配置首页日期光晕Stack 叠加光晕和数字与 LinearGradient 的对比选择指南实际应用按钮光晕、头像光晕下一篇文章将进入第四系列写日记与编辑敬请期待。如果这篇文章对你有帮助欢迎点赞、收藏⭐、关注你的支持是我持续创作的动力相关资源RadialGradient API 文档LinearGradient 文档Stack 容器文档海风日记项目源码[HarmonyOS 开发者官网](https://atomgit.com/openharmony/docs开源鸿蒙跨平台社区
