当前位置： 首页 > news >正文

QML Color 颜色应用示例合集

news 2026/5/13 19:20:57

目录

    • 1. 引言
    • 2. 演示效果
    • 3. 代码说明
      • 3.1 命名颜色
      • 3.2 十六进制颜色输入
      • 3.3 颜色对话框
      • 3.4 渐变色
      • 3.5 组件中的颜色应用
    • 4. 技术要点
      • 4.1 颜色格式选择指南
      • 4.2 常用颜色函数
    • 5. 工程下载

1. 引言

在 QML 应用开发中，颜色（Color）是最基础也是最重要的视觉元素之一。无论是界面背景、文本颜色、边框样式，还是渐变效果，都离不开对颜色的正确使用。QML 提供了多种颜色定义方式，满足不同场景下的需求。

本文基于历史示例进行整合和优化，包括：

  • QML ColorDialog：组件应用详解

由于代码篇幅较长，文章中只显示关键部分，完整代码见下载链接。

2. 演示效果

项目中的 Main.qml 文件使用 SwipeView 和 TabBar 展示了五种不同的颜色应用方案：

  1. 命名颜色：展示 QML 内置的 12 种常用命名颜色
  2. 十六进制输入：通过输入框实时修改前景色、背景色、边框色
  3. 颜色对话框：使用系统颜色选择器选择任意颜色
  4. 渐变色：支持水平和垂直方向的线性渐变
  5. 组件应用：展示颜色在 Button、Slider、Switch、TextField 等组件中的应用

3. 代码说明

3.1 命名颜色

文件：Demo_NamedColors.qml

运行效果：


命名颜色展示了 QML 内置的颜色名称字符串，可直接用作 color 属性值。

关键代码：

Item { ColumnLayout { anchors.fill: parent anchors.margins: 20 spacing: 16 Text { text: "Demo_1 命名颜色" font.pixelSize: 22 font.bold: true } Text { text: "QML 内置的固定颜色字符串，可直接用作 color 属性值" font.pixelSize: 13 color: "#888" } GridLayout { columns: 4 rowSpacing: 12 columnSpacing: 12 Layout.alignment: Qt.AlignHCenter property var namedColors: [ { name: "red", color: "red" }, { name: "green", color: "green" }, { name: "blue", color: "blue" }, { name: "cyan", color: "cyan" }, { name: "magenta",color: "magenta" }, { name: "yellow", color: "yellow" }, { name: "orange", color: "orange" }, { name: "purple", color: "purple" }, { name: "tomato", color: "tomato" }, { name: "gold", color: "gold" }, { name: "teal", color: "teal" }, { name: "navy", color: "navy" } ] Repeater { model: parent.namedColors Column { spacing: 4 Rectangle { width: 100 height: 60 color: modelData.color radius: 6 border.width: 1 border.color: "#cccccc" } Text { anchors.horizontalCenter: parent.horizontalCenter text: modelData.name font.pixelSize: 13 font.family: "Consolas" } } } } } }

代码说明：

命名颜色是 QML 中最简单的颜色定义方式，直接使用颜色名称字符串即可。

要点：

  • QML 支持 SVG 规范中的所有命名颜色（如 “red”、“blue”、“green” 等）
  • 命名颜色不区分大小写，“Red” 和 “red” 效果相同
  • 使用数组存储颜色数据，配合 Repeater 动态生成色块
  • 这种用法适合快速原型开发或需要使用标准颜色的场景

3.2 十六进制颜色输入

文件：Demo_HexInput.qml

运行效果：

十六进制颜色输入展示了如何通过输入框实时修改颜色值。

关键代码：

Item { property color fgColor: "#1296FF" property color bgColor: "#FFFFFF" property color bdColor: "#E0E0E0" ColumnLayout { anchors.fill: parent anchors.margins: 20 spacing: 16 Text { text: "Demo_2 十六进制颜色输入" font.pixelSize: 22 font.bold: true } Text { text: "输入十六进制值修改前景色（文本）、背景色、边框色" font.pixelSize: 13 color: "#888" } RowLayout { Layout.alignment: Qt.AlignHCenter spacing: 30 Rectangle { width: 240 height: 160 color: bgColor border.width: 4 border.color: bdColor radius: 8 Text { anchors.centerIn: parent text: "前景色文本" font.pixelSize: 20 font.bold: true color: fgColor } } ColumnLayout { spacing: 10 Label { text: "前景色（文本）" font.pixelSize: 13 } TextField { id: fgInput text: fgColor.toString() maximumLength: 9 font.family: "Consolas" font.pixelSize: 14 Layout.preferredWidth: 140 onTextChanged: { if (text.length === 7 || text.length === 9) { try { fgColor = text } catch(e) {} } } } // 背景色和边框色输入框类似... } } } }

代码说明：

十六进制颜色是最常用的颜色表示方式，支持 RGB 和 ARGB 两种格式。

要点：

  • 十六进制格式：#RRGGBB（6位）或#AARRGGBB（8位，含透明度）
  • color.toString()返回颜色的十六进制字符串表示
  • 使用try-catch防止无效颜色值导致程序崩溃
  • 检查输入长度（7或9字符）确保格式正确
  • 这种用法适合需要精确控制颜色的场景，如设计稿还原

3.3 颜色对话框

文件：Demo_ColorDialog.qml

运行效果：

颜色对话框展示了如何使用 ColorDialog 弹出系统颜色选择器。

关键代码：

Item { property color chosenColor: "lightblue" ColumnLayout { anchors.fill: parent anchors.margins: 20 spacing: 16 Text { text: "Demo_3 ColorDialog 颜色选择" font.pixelSize: 22 font.bold: true } Text { text: "使用 ColorDialog 弹出系统颜色选择器" font.pixelSize: 13 color: "#888" } RowLayout { Layout.alignment: Qt.AlignHCenter spacing: 30 Rectangle { width: 240 height: 160 color: chosenColor radius: 8 border.width: 2 border.color: "#cccccc" Text { anchors.centerIn: parent text: "点击右侧按钮\n选择颜色" font.pixelSize: 16 horizontalAlignment: Qt.AlignHCenter color: Qt.rgba(1 - chosenColor.r, 1 - chosenColor.g, 1 - chosenColor.b, 1) } } ColumnLayout { spacing: 10 Layout.alignment: Qt.AlignTop Label { text: "当前颜色值" font.pixelSize: 13 } Text { text: chosenColor.toString() font.family: "Consolas" font.pixelSize: 14 } Button { text: "选择颜色..." onClicked: colorDialog.open() } Label { text: "R: %1 G: %2 B: %3" .arg(Math.round(chosenColor.r * 255)) .arg(Math.round(chosenColor.g * 255)) .arg(Math.round(chosenColor.b * 255)) font.family: "Consolas" font.pixelSize: 12 color: "#666666" } } } } ColorDialog { id: colorDialog title: "选择颜色" selectedColor: chosenColor onAccepted: { chosenColor = colorDialog.selectedColor } } }

代码说明：

ColorDialog 提供了系统级的颜色选择器，用户可以通过可视化方式选择颜色。

要点：

  • ColorDialog来自QtQuick.Dialogs模块
  • selectedColor属性获取/设置当前选中的颜色
  • onAccepted信号处理用户确认选择的操作
  • color.r/g/b获取颜色的 RGB 分量（0.0-1.0 范围）
  • 使用Qt.rgba()计算对比色，确保文本可读性
  • 这种用法适合需要用户自定义颜色的场景，如主题设置

3.4 渐变色

文件：Demo_Gradient.qml

运行效果：


渐变色展示了如何使用 Gradient 和 GradientStop 实现线性渐变效果。

关键代码：

Item { property color gradStart: "#fed0d0" property color gradEnd: "#ffffff" property int gradOrientation: Gradient.Horizontal ColumnLayout { anchors.fill: parent anchors.margins: 20 spacing: 16 Text { text: "Demo_4 渐变色" font.pixelSize: 22 font.bold: true } Text { text: "使用 Gradient 和 GradientStop 实现线性渐变" font.pixelSize: 13 color: "#888" } RowLayout { Layout.alignment: Qt.AlignHCenter spacing: 30 Rectangle { width: 240 height: 160 radius: 8 border.width: 2 border.color: "#cccccc" gradient: Gradient { orientation: gradOrientation GradientStop { position: 0.0; color: gradStart } GradientStop { position: 0.5; color: Qt.rgba( (gradStart.r + gradEnd.r) / 2, (gradStart.g + gradEnd.g) / 2, (gradStart.b + gradEnd.b) / 2, 1) } GradientStop { position: 1.0; color: gradEnd } } Text { anchors.centerIn: parent text: gradOrientation === Gradient.Horizontal ? "水平渐变" : "垂直渐变" font.pixelSize: 16 font.bold: true color: "white" style: Text.Outline styleColor: "#000000" } } ColumnLayout { spacing: 8 Layout.alignment: Qt.AlignTop RowLayout { spacing: 8 Rectangle { width: 24 height: 24 radius: 4 color: gradStart border.width: 1 border.color: "#aaaaaa" } Button { text: "起始色" onClicked: startDialog.open() } } RowLayout { spacing: 8 Rectangle { width: 24 height: 24 radius: 4 color: gradEnd border.width: 1 border.color: "#aaaaaa" } Button { text: "结束色" onClicked: endDialog.open() } } Button { text: "切换方向" onClicked: { gradOrientation = gradOrientation === Gradient.Horizontal ? Gradient.Vertical : Gradient.Horizontal } } Label { text: "方向: " + (gradOrientation === Gradient.Horizontal ? "水平" : "垂直") font.pixelSize: 12 color: "#666666" } } } } ColorDialog { id: startDialog title: "选择渐变起始色" selectedColor: gradStart onAccepted: gradStart = selectedColor } ColorDialog { id: endDialog title: "选择渐变结束色" selectedColor: gradEnd onAccepted: gradEnd = selectedColor } }

代码说明：

Gradient 组件用于在 Rectangle 上创建线性渐变效果，通过 GradientStop 定义颜色停靠点。

要点：

  • Gradient.orientation设置渐变方向：Gradient.Horizontal或Gradient.Vertical
  • GradientStop.position定义颜色位置（0.0-1.0）
  • 可以添加多个 GradientStop 实现多色渐变
  • 通过计算起始色和结束色的中间值实现平滑过渡
  • 渐变色常用于背景、按钮、进度条等视觉元素

3.5 组件中的颜色应用

文件：Demo_ComponentColors.qml

运行效果：


组件颜色应用展示了颜色在常用 Qt Quick 组件中的实践。

关键代码：

Item { property color accentColor: "#2196F3" ColumnLayout { anchors.fill: parent anchors.margins: 20 spacing: 16 Text { text: "Demo_5 组件中的颜色" font.pixelSize: 22 font.bold: true } Text { text: "颜色在常用 Qt Quick 组件中的应用" font.pixelSize: 13 color: "#888" } Rectangle { width: 500 height: 160 Layout.alignment: Qt.AlignHCenter color: "#F5F5F5" radius: 8 border.width: 1 border.color: "#E0E0E0" GridLayout { anchors.fill: parent anchors.margins: 16 columns: 2 rowSpacing: 12 columnSpacing: 20 Button { text: "普通按钮" Layout.preferredWidth: 120 Layout.preferredHeight: 40 background: Rectangle { color: parent.pressed ? Qt.darker(accentColor, 1.2) : parent.hovered ? Qt.lighter(accentColor, 1.1) : accentColor radius: 4 } contentItem: Text { text: parent.text font.pixelSize: 14 color: "white" horizontalAlignment: Qt.AlignHCenter verticalAlignment: Qt.AlignVCenter } } Slider { id: slider value: 0.6 Layout.preferredWidth: 300 Layout.preferredHeight: 35 background: Rectangle { x: slider.leftPadding y: slider.topPadding + slider.availableHeight / 2 - height / 2 width: slider.availableWidth height: 4 radius: 2 color: "#E0E0E0" Rectangle { width: slider.visualPosition * parent.width height: parent.height radius: 2 color: accentColor } } handle: Rectangle { x: slider.leftPadding + slider.visualPosition * slider.availableWidth - width / 2 y: slider.topPadding + slider.availableHeight / 2 - height / 2 width: 20 height: 20 radius: 10 color: accentColor border.width: 2 border.color: Qt.lighter(accentColor, 1.3) } } Switch { id: sw checked: true Layout.preferredWidth: 60 Layout.preferredHeight: 30 indicator: Rectangle { width: 60 height: 30 radius: 15 color: sw.checked ? accentColor : "#BDBDBD" Rectangle { x: sw.checked ? parent.width - width - 3 : 3 y: 3 width: 20 height: 24 radius: 12 color: "white" Behavior on x { NumberAnimation { duration: 150 } } } } } TextField { Layout.preferredWidth: 300 Layout.preferredHeight: 35 placeholderText: "输入文本..." selectionColor: accentColor selectedTextColor: "white" font.pixelSize: 12 background: Rectangle { color: "white" border.color: accentColor border.width: 2 radius: 8 } } } } RowLayout { Layout.alignment: Qt.AlignHCenter spacing: 12 Text { text: "主题色:" font.pixelSize: 13 } Repeater { model: ["#2196F3", "#4CAF50", "#FF9800", "#E91E63", "#9C27B0", "#009688"] Rectangle { width: 28 height: 28 radius: 14 color: modelData border.width: accentColor.toString().toLowerCase() === modelData.toString().toLowerCase() ? 3 : 0 border.color: "#333" MouseArea { anchors.fill: parent cursorShape: Qt.PointingHandCursor onClicked: accentColor = modelData } } } } } }

代码说明：

通过自定义组件的 background 和 contentItem，可以实现统一的主题色风格。

要点：

  • Qt.darker(color, factor)加深颜色，factor > 1
  • Qt.lighter(color, factor)加亮颜色，factor > 1
  • Button 的pressed和hovered状态用于交互反馈
  • Slider 的visualPosition表示滑块当前位置（0.0-1.0）
  • Switch 使用checked状态切换颜色
  • TextField 的selectionColor设置选中文本的高亮色
  • 底部色板提供主题色快速切换功能

4. 技术要点

4.1 颜色格式选择指南

根据场景选择合适的颜色格式：

场景推荐格式说明
快速原型命名颜色简单直观，无需记忆数值
设计稿还原十六进制精确控制，与设计工具一致
用户自定义ColorDialog可视化选择，用户体验好
视觉效果渐变色丰富层次感，提升界面品质
主题切换动态属性统一管理，便于维护

4.2 常用颜色函数

Qt 颜色工具函数：

// 创建颜色 Qt.rgba(r, g, b, a) // RGBA 分量（0.0-1.0） Qt.hsla(h, s, l, a) // HSLA 分量 // 颜色调整 Qt.darker(color, factor) // 加深颜色 Qt.lighter(color, factor) // 加亮颜色 Qt.tint(baseColor, tintColor) // 混合颜色 // 颜色属性 color.r // 红色分量（0.0-1.0） color.g // 绿色分量 color.b // 蓝色分量 color.a // 透明度 color.hsvHue // HSV 色相 color.hslSaturation // HSL 饱和度

5. 工程下载

下载链接：QML Color 颜色应用示例合集

http://www.jsqmd.com/news/810591/

相关文章：

  • 6.这个论文发表过吗？可以直接用吗？能过查重吗？
  • MySQL数据类型与约束 数值字符串日期
  • 大厂技术人的“隐形天花板”：为什么升到P8就上不去了？
  • 逻辑删除不等于物理销毁：KingbaseES 敏感数据擦除实战
  • 数据删了不等于销毁:KingbaseES敏感数据物理擦除实战指南
  • Taotoken用量看板如何帮助开发者精细化管理API成本
  • 解密猫抓扩展：5个技巧让你成为浏览器资源嗅探高手
  • 7.论文里面的代码、图片等会查重吗？
  • 只知道黑客很酷？普通人学会黑客技术的爽感，远超想象！完整路线指南奉上
  • 旧电脑也能升Win11 22H2？保姆级绕过TPM/CPU检测教程（附卡31%解决方案）
  • TVA重塑智慧城市安防新范式（15）
  • picx-cli：基于GitHub图床的命令行工具，提升开发者图片管理效率
  • 开发AI应用时如何利用Taotoken模型广场进行选型与测试
  • D3KeyHelper终极指南：暗黑3宏工具5分钟快速上手攻略
  • 【Java SE】多线程（二）：线程安全、synchronized、volatile与wait/notify详解
  • 5分钟彻底解决Windows激活难题：KMS_VL_ALL_AIO智能激活完全指南
  • 同相比例、反相比例、差分、加减运算放到大电路基础知识及Multisim电路仿真
  • 陈，无干扰恒温加热鼠台 无干扰恒温加热兔台 鼠兔解剖台 鼠兔二用解剖台
  • 汽车电子冗余设计｜全网独家复现，MSA注意力创新改进篇 从芯片架构到系统级功能安全，从原理、代码到量产落地
  • 在无代码平台中通过Webhook接入Taotoken大模型
  • Docker容器化高可用架构部署方案（三）
  • 别再死记硬背了！用5个工业现场案例，帮你彻底搞懂液压与气动系统
  • 什么是Docker
  • ARM-2D：为Cortex-M GUI注入“灵魂”的2D加速库
  • 半导体并购新范式：从外科手术到生态位投资的战略演变
  • MCP与n8n集成：AI智能体调用自动化工作流实战指南
  • 技术媒体进化论：从行业记录者到工程师社区的40年蜕变
  • HexHub全面支持国产数据库以及AI助手
  • 连锁不平衡热图绘制神器：LDBlockShow快速入门与实战指南
  • ArcGIS线要素编辑进阶：除了画线，这5个高效编辑技巧让你事半功倍