目录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 展示了五种不同的颜色应用方案命名颜色展示 QML 内置的 12 种常用命名颜色十六进制输入通过输入框实时修改前景色、背景色、边框色颜色对话框使用系统颜色选择器选择任意颜色渐变色支持水平和垂直方向的线性渐变组件应用展示颜色在 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 两种格式。要点十六进制格式#RRGGBB6位或#AARRGGBB8位含透明度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.VerticalGradientStop.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 1Qt.lighter(color, factor)加亮颜色factor 1Button 的pressed和hovered状态用于交互反馈Slider 的visualPosition表示滑块当前位置0.0-1.0Switch 使用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 颜色应用示例合集