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

QML Universal样式

news 来源：原创 2025/4/21 8:22:12

Qt Quick Controls 2 的 Universal 风格实现了 Microsoft Fluent Design 规范，提供适合 Windows 平台的 UI 组件。

基本属性

全局属性（通过 Universal 对象访问）

属性	类型	默认值	描述
`theme`	enum	`Universal.Light`	主题风格 (`Light/Dark/System`)
`accent`	color	`"#0078D7"`	强调色 (Windows 蓝)
`foreground`	color	根据主题自动计算	前景色
`background`	color	根据主题自动计算	背景色
`font`	Font	系统字体	全局字体设置

组件通用属性

属性	类型	描述
`Universal.accent`	color	组件强调色覆盖
`Universal.foreground`	color	组件前景色覆盖
`Universal.background`	color	组件背景色覆盖

常用方法

方法	参数	描述
`Universal.color()`	`type` (enum)	获取主题颜色

颜色类型枚举：

qml

Universal.Accent
Universal.Background
Universal.Foreground
Universal.ThemeDark
Universal.ThemeLight

信号

信号	描述
`Universal.themeChanged()`	主题变化时触发
`Universal.accentChanged()`	强调色变化时触发

基础使用示例

qml

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Universal 2.15ApplicationWindow {Universal.theme: Universal.DarkUniversal.accent: Universal.color(Universal.Orange)Button {text: "Universal Button"Universal.foreground: "white"}
}

组件样式定制

按钮样式

qml

Button {text: "Fluent Button"Universal.foreground: Universal.accentUniversal.background: "transparent"
}

文本字段样式

qml

TextField {placeholderText: "Universal Field"Universal.accent: Universal.color(Universal.Green)
}

导航视图

qml

Pane {Universal.background: Universal.theme === Universal.Light ? "#f3f3f3" : "#202020"
}

主题切换示例

qml

Button {text: "Toggle Theme"onClicked: Universal.theme = Universal.theme === Universal.Light ? Universal.Dark : Universal.Light
}ComboBox {model: ["Blue", "Green", "Red", "Orange"]onActivated: Universal.accent = Qt.color(model[index])
}

完整组件示例

qml

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Universal 2.15ApplicationWindow {width: 400height: 600visible: truetitle: "Universal Demo"Universal.theme: Universal.SystemUniversal.accent: Universal.CobaltColumn {spacing: 20anchors.centerIn: parentButton {text: "Flat Button"Universal.foreground: Universal.accent}Slider {width: 200Universal.accent: Universal.Emerald}Switch {text: "Universal Switch"Universal.foreground: Universal.Red}ProgressBar {width: 200value: 0.6Universal.accent: Universal.Violet}}
}

颜色参考表

颜色名称	示例值	描述
Lime	`#a4c400`	Windows 特色颜色
Green	`#60a917`
Emerald	`#008a00`
Teal	`#00aba9`
Cyan	`#1ba1e2`
Cobalt	`#0050ef`
Indigo	`#6a00ff`
Violet	`#aa00ff`
Pink	`#f472d0`
Magenta	`#d80073`
Crimson	`#a20025`
Red	`#e51400`
Orange	`#fa6800`
Amber	`#f0a30a`
Yellow	`#e3c800`
Brown	`#825a2c`
Olive	`#6d8764`
Steel	`#647687`
Mauve	`#76608a`
Taupe	`#87794e`

与 Material 风格的主要区别

设计语言：
- Universal 遵循 Fluent Design (Microsoft)
- Material 遵循 Material Design (Google)
默认交互效果：
- Universal 使用更微妙的动画和阴影
- Material 使用更明显的波纹效果
颜色系统：
- Universal 使用 Windows 特色颜色集
- Material 使用 Google 标准颜色集
组件样式：
- Universal 控件边框更锐利
- Material 控件圆角更明显