文章目录渐变先看方向再看颜色状态负责调试参数色标的顺序决定气质页面结构怎么看完整代码写在最后渐变背景很容易写成“看起来很炫但文字看不清”。我自己做卡片 UI 时最怕的不是不会写linearGradient而是颜色、方向和文字层级没配好最后页面显得很廉价。这个 HarmonyOS7 案例把线性渐变、径向渐变和预设卡片放在一个页面里。它更像一个颜色调试板适合边看效果边理解参数。渐变先看方向再看颜色页面里有directionItems和directionNames把常见渐变方向整理成数组。这样做比在 UI 里一段段硬编码舒服很多也方便后面做方向选择器。GradientCard则把标题、描述、色标和方向组合成一个预设。你可以把它理解成“渐变主题配置”。后面要加品牌色、会员卡背景、活动 Banner只要往数组里加配置就行。状态负责调试参数angleVal、color1、color2、selectedAngle这些状态用于动态调试渐变效果。用户切换方向或颜色时背景立即刷新这种反馈对设计类页面很重要。渐变不建议凭感觉一次写死。尤其是深色背景上放白字、浅色背景上放深字时最好通过页面实时看对比度别等到整页做完才发现可读性不行。色标的顺序决定气质同样两个颜色方向不同、停止点不同效果差别很大。线性渐变适合做卡片、按钮、标题背景径向渐变更适合做光斑、聚焦感、装饰气氛。这个页面把两类渐变放在一起能很直观看到它们的区别线性渐变更像方向明确的过渡径向渐变更像从某个中心点扩散。页面结构怎么看GradientBackgroundPage分成方向控制、多色停止点、径向渐变和卡片预设。读代码时先看GradientCard再看presets数组最后看每个区域如何把颜色配置传给linearGradient或radialGradient。如果你要把它改成真实项目我建议保留预设数组把设计稿里的渐变都抽成配置。这样后面统一换主题色会省很多时间。完整代码下面是完整代码。入口组件名是GradientBackgroundPage适合用来整理 HarmonyOS7 项目里的渐变背景方案。// 线性渐变与径向渐变interfaceGradientCard{id:numberlabel:stringdesc:stringcolors:[ResourceColor,number][]direction:GradientDirection}EntryComponentstruct GradientBackgroundPage{StateangleVal:number180Statecolor1:string#667EEAStatecolor2:string#764BA2StateselectedAngle:GradientDirectionGradientDirection.BottomprivatedirectionItems:GradientDirection[][GradientDirection.Top,GradientDirection.Bottom,GradientDirection.Left,GradientDirection.Right,GradientDirection.LeftTop,GradientDirection.RightTop,GradientDirection.LeftBottom,GradientDirection.RightBottom]privatedirectionNames:string[][↑上,↓下,←左,→右,↖左上,↗右上,↙左下,↘右下]privatepresets:GradientCard[][{id:1,label:极光紫,desc:Purple Aurora,colors:[[#667EEA,0],[#764BA2,1]],direction:GradientDirection.RightBottom},{id:2,label:橙红夕阳,desc:Sunset Glow,colors:[[#FC466B,0],[#3F5EFB,1]],direction:GradientDirection.Right},{id:3,label:清新绿,desc:Fresh Green,colors:[[#11998E,0],[#38EF7D,1]],direction:GradientDirection.Bottom},{id:4,label:深海蓝,desc:Deep Ocean,colors:[[#2193B0,0],[#6DD5ED,1]],direction:GradientDirection.Bottom},{id:5,label:火焰橙,desc:Fire Orange,colors:[[#F7971E,0],[#FFD200,1]],direction:GradientDirection.Right},{id:6,label:玫瑰金,desc:Rose Gold,colors:[[#B24592,0],[#F15F79,1]],direction:GradientDirection.RightBottom},]build(){Scroll(){Column({space:0}){// 标题Text(渐变色背景).fontSize(20).fontWeight(FontWeight.Bold).fontColor(#111827).width(100%).padding({left:20,right:20,top:20,bottom:4})Text(linearGradient / radialGradient / sweepGradient).fontSize(13).fontColor(#6B7280).width(100%).padding({left:20,right:20,bottom:16})// 一、方向控制Column({space:12}){Text(一、线性渐变方向控制).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#374151).width(100%)// 方向按钮Flex({wrap:FlexWrap.Wrap,justifyContent:FlexAlign.Start}){ForEach(this.directionItems,(dir:GradientDirection,idx:number){Button(this.directionNames[idx]).fontSize(12).fontColor(this.selectedAngledir?Color.White:#374151).backgroundColor(this.selectedAngledir?#2563EB:#F3F4F6).borderRadius(16).padding({left:10,right:10,top:5,bottom:5}).margin({right:6,bottom:6}).onClick((){this.selectedAngledir})},(dir:GradientDirection)dir.toString())}// 预览Row().width(100%).height(120).borderRadius(12).linearGradient({direction:this.selectedAngle,colors:[[#2563EB,0],[#7C3AED,0.5],[#EC4899,1]]})}.width(100%).padding({left:20,right:20}).alignItems(HorizontalAlign.Start).margin({bottom:16})// 二、多色渐变Column({space:12}){Text(二、多色停止点渐变).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#374151).width(100%)Column({space:8}){// 彩虹渐变Row().width(100%).height(50).borderRadius(25).linearGradient({direction:GradientDirection.Right,colors:[[#EF4444,0],[#F97316,0.17],[#EAB308,0.33],[#22C55E,0.5],[#3B82F6,0.67],[#6366F1,0.83],[#A855F7,1]]})Text(彩虹渐变7色均匀分布).fontSize(12).fontColor(#6B7280)// 渐隐效果Row().width(100%).height(50).borderRadius(10).linearGradient({direction:GradientDirection.Right,colors:[[#2563EB,0],[#2563EB,0.6],[rgba(37,99,235,0),1]]})Text(渐隐效果透明度渐变).fontSize(12).fontColor(#6B7280)// 双色分段Row().width(100%).height(50).borderRadius(10).linearGradient({direction:GradientDirection.Right,colors:[[#EF4444,0],[#EF4444,0.5],[#2563EB,0.5],[#2563EB,1]]})Text(硬切割分段颜色).fontSize(12).fontColor(#6B7280)}}.width(100%).padding({left:20,right:20}).alignItems(HorizontalAlign.Start).margin({bottom:16})// 三、径向渐变Column({space:12}){Text(三、径向渐变 radialGradient).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#374151).width(100%)Row({space:12}){Column({space:6}){Row().width(90).height(90).borderRadius(45).radialGradient({center:[45,45],radius:45,colors:[[#FCD34D,0],[#F97316,0.6],[#EF4444,1]]})Text(太阳).fontSize(12).fontColor(#6B7280)}.alignItems(HorizontalAlign.Center)Column({space:6}){Row().width(90).height(90).borderRadius(45).radialGradient({center:[45,45],radius:45,colors:[[#BFDBFE,0],[#3B82F6,0.7],[#1E40AF,1]]})Text(水晶球).fontSize(12).fontColor(#6B7280)}.alignItems(HorizontalAlign.Center)Column({space:6}){Row().width(90).height(90).borderRadius(10).radialGradient({center:[70,20],radius:80,colors:[[#FFFFFF,0],[#A78BFA,0.5],[#4C1D95,1]]})Text(偏心渐变).fontSize(12).fontColor(#6B7280)}.alignItems(HorizontalAlign.Center)}.width(100%).justifyContent(FlexAlign.SpaceAround).padding(12).backgroundColor(#F9FAFB).borderRadius(10)}.width(100%).padding({left:20,right:20}).alignItems(HorizontalAlign.Start).margin({bottom:16})// 四、预设卡片Column({space:12}){Text(四、渐变卡片预设).fontSize(14).fontWeight(FontWeight.Bold).fontColor(#374151).width(100%)Flex({wrap:FlexWrap.Wrap,justifyContent:FlexAlign.SpaceBetween}){ForEach(this.presets,(card:GradientCard){Column({space:6}){Column(){Text(card.label).fontSize(14).fontWeight(FontWeight.Bold).fontColor(Color.White)Text(card.desc).fontSize(11).fontColor(rgba(255,255,255,0.8))}.width(100%).height(72).justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).borderRadius(10).linearGradient({direction:card.direction,colors:card.colors})}.width(48%).margin({bottom:10})},(card:GradientCard)card.id.toString())}}.width(100%).padding({left:20,right:20}).alignItems(HorizontalAlign.Start).margin({bottom:24})}}.width(100%).height(100%).backgroundColor(#FFFFFF)}}写在最后如果你正在整理 HarmonyOS7 组件案例可以把这篇当成线性渐变与径向渐变的实践模板。先跑通页面再逐步替换数据和样式效率会高不少。