HarmonyOS7 渐变背景设计页实战：线性渐变与径向渐变 不只是会用，还要用得顺手

发布时间：2026/7/25 11:10:19

HarmonyOS7 渐变背景设计页实战：线性渐变与径向渐变 不只是会用，还要用得顺手
文章目录渐变先看方向再看颜色状态负责调试参数色标的顺序决定气质页面结构怎么看完整代码写在最后渐变背景很容易写成“看起来很炫但文字看不清”。我自己做卡片 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 组件案例可以把这篇当成线性渐变与径向渐变的实践模板。先跑通页面再逐步替换数据和样式效率会高不少。

相关新闻

如何codex换个皮肤 - CodexDreamSkin外部皮肤主体换肤工具-不改官方安装包

如何codex换个皮肤 - CodexDreamSkin外部皮肤主体换肤工具-不改官方安装包

文章目录一张图，一种心情 写代码，也要有氛围感直奔主题如何做概念效果图（不可直接导入）一张图，一种心情 写代码，也要有氛围感 挑一张你喜欢的图片，一键把codex 界面换成 “会呼吸的” 自定义主…

2026/7/24 18:30:53 阅读更多 →
Discovering Expert-Level Nash Equilibrium Algorithms with Large Language Models——利用大型语言模型发现专家级纳什均衡算法

Discovering Expert-Level Nash Equilibrium Algorithms with Large Language Models——利用大型语言模型发现专家级纳什均衡算法

一、研究背景与问题 1.1 核心问题 在算法博弈论中，近似纳什均衡（ANE） 的多项式时间算法设计是一个长期悬而未决的开放问题。核心挑战在于： 所有已知的精确纳什均衡算法（如 Lemke-Howson）需要指数时间 PP…

2026/7/24 16:17:24 阅读更多 →
PowerShellEditorServices性能优化指南：提升大型PowerShell项目编辑体验的10个技巧

PowerShellEditorServices性能优化指南：提升大型PowerShell项目编辑体验的10个技巧

PowerShellEditorServices性能优化指南：提升大型PowerShell项目编辑体验的10个技巧 【免费下载链接】PowerShellEditorServices A common platform for PowerShell development support in any editor or application! 项目地址: https://gitcode.com/gh_mirrors/…

2026/7/22 15:14:34 阅读更多 →

最新新闻

终极AI成本控制指南：如何用Tiktokenizer精准计算提示词Token数量

终极AI成本控制指南：如何用Tiktokenizer精准计算提示词Token数量

终极AI成本控制指南：如何用Tiktokenizer精准计算提示词Token数量 【免费下载链接】tiktokenizer Online playground for OpenAPI tokenizers 项目地址: https://gitcode.com/gh_mirrors/ti/tiktokenizer 你是否曾经在使用ChatGPT或GPT-4时，看着AP…

2026/7/25 11:09:26 阅读更多 →
智能制造技术交易与管理系统的最佳实践平台或SaaS工具推荐？

智能制造技术交易与管理系统的最佳实践平台或SaaS工具推荐？

核心要点： 智能制造领域技术转移与成果转化存在供需错位、评估标准缺失、对接效率低等核心痛点，亟需数智化平台支撑。基于国家标准（如GB/T 39116-2020、GB/T 44731-2024）构建的SaaS工具可实现能力诊断、专利评估与产业图谱智配&am…

2026/7/25 11:09:26 阅读更多 →
终极指南：3分钟让Chrome成为你的Markdown文档专业阅读器

终极指南：3分钟让Chrome成为你的Markdown文档专业阅读器

终极指南：3分钟让Chrome成为你的Markdown文档专业阅读器 【免费下载链接】markdownReader markdownReader is a extention for chrome, used for reading markdown file. 项目地址: https://gitcode.com/gh_mirrors/ma/markdownReader 还在为浏览器中杂乱的M…

2026/7/25 11:09:26 阅读更多 →
抖音批量下载终极指南：5分钟上手，轻松保存无水印视频

抖音批量下载终极指南：5分钟上手，轻松保存无水印视频

抖音批量下载终极指南：5分钟上手，轻松保存无水印视频 【免费下载链接】douyin-downloader A practical Douyin downloader for both single-item and profile batch downloads, with progress display, retries, SQLite deduplication, and browser fall…

2026/7/25 11:09:26 阅读更多 →
同一套 ComfyUI 工作流第二次为什么快一倍：4 类消息误解 + 互斥阶段账本 + 10 单元实验矩阵

同一套 ComfyUI 工作流第二次为什么快一倍：4 类消息误解 + 互斥阶段账本 + 10 单元实验矩阵

同一套 ComfyUI 工作流，第二次为什么快一倍？ TL;DR 场景：同一套 ComfyUI 工作流第二次运行耗时明显变短，最容易得出的结论是"采样器或注意力变快了"，但缺乏任何阶段归属的耗时数据。结论：第二次…

2026/7/25 11:09:26 阅读更多 →
AMAT 0190-05410 总线卡

AMAT 0190-05410 总线卡

AMAT 0190-05410 总线卡1、cPCI 总线架构双 IP 载板，适配应用材料 Centura、Endura 半导体设备2、支持搭载 Industry Pack 子模块，灵活扩展模拟、数字信号通道3、AMAT 0190-05410 实现主控背板与外设模块高速数据交互传输4、优化总线时序设计&#xff0c…

2026/7/25 11:08:26 阅读更多 →

日新闻

突破文档下载限制：kill-doc让你看到的都能保存

突破文档下载限制：kill-doc让你看到的都能保存

突破文档下载限制：kill-doc让你看到的都能保存 【免费下载链接】kill-doc 看到经常有小伙伴们需要下载一些免费文档，但是相关网站浏览体验不好各种广告，各种登录验证，需要很多步骤才能下载文档，该脚本就是为了解决您的…

2026/7/25 0:00:35 阅读更多 →
C++ string类模拟实现：从深拷贝到内存管理的完整指南

C++ string类模拟实现：从深拷贝到内存管理的完整指南

1. 项目概述：为什么我们要“手撕”string类？在C的学习道路上，尤其是从C语言过渡到C的“初阶”阶段，string类绝对是一个绕不开的核心。标准库里的std::string用起来太方便了，、find、substr，几个操作符和函数…

2026/7/25 0:00:35 阅读更多 →
三角洲寻宝鼠工具：高效文件搜索与资源管理实战指南

三角洲寻宝鼠工具：高效文件搜索与资源管理实战指南

1. 先搞清楚“三角洲寻宝鼠”到底是什么工具从名称来看，“三角洲寻宝鼠”更像是一个资源查找或文件检索类工具，而不是游戏或娱乐软件。这类工具的核心价值在于帮助用户快速定位特定资源，比如文档、图片、压缩包或特定格式的文件。如果你经常需…

2026/7/25 0:00:35 阅读更多 →

周新闻

Go语言静态资源打包方案对比与实践指南

Go语言静态资源打包方案对比与实践指南

1. 项目背景与核心需求在Go语言开发中，我们经常需要处理静态资源文件的打包问题。无论是Web应用的模板文件、前端资源，还是配置文件、证书等，都需要随程序一起分发。传统做法是将这些文件与编译后的二进制文件放在同一目录下，但这…

2026/7/25 5:08:22 阅读更多 →
Go语言实现高性能LDAP认证服务的架构与实践

Go语言实现高性能LDAP认证服务的架构与实践

1. 项目背景与核心价值LDAP（轻量级目录访问协议）作为企业级身份认证的黄金标准，已经服务了超过80%的财富500强公司。我在金融科技领域实施统一认证体系时，发现传统Java方案存在启动慢、内存占用高等痛点。而Go语言凭借其协程并发模…

2026/7/25 5:13:53 阅读更多 →
【AI面试官实战指南】：用ChatGPT模拟10类高频技术岗面试，3天提升应答精准度92%

【AI面试官实战指南】：用ChatGPT模拟10类高频技术岗面试，3天提升应答精准度92%

更多请点击： https://intelliparadigm.com 第一章：AI面试官实战指南的核心价值与适用场景 AI面试官并非替代人类HR的“黑箱工具”，而是以可解释、可审计、可迭代的方式，赋能招聘全链路的关键基础设施。其核心价值在于将主观经验沉…

2026/7/24 18:52:18 阅读更多 →

月新闻