本页内容

Theme QML Type

定义了配色方案的颜色和样式覆盖规则。更多...

Import Statement: import Qt.labs.StyleKit
Inherits:

AbstractStyle

Status: Technology preview

此类型处于技术预览阶段,可能会有变更。

详细说明

主题会覆盖“Style ”中定义的属性,为特定的配色方案提供独特的视觉外观。样式通常配置结构属性,例如隐式尺寸、内边距和圆角,而主题则指定颜色、阴影和其他视觉属性。但这并非限制——主题可以覆盖样式所能设置的任何属性。

一个样式可以提供light 和dark 主题。当themeName 设置为"System" (默认值)时,活动主题遵循operating system's color scheme 。您还可以在运行时使用CustomTheme 和switch between them 创建其他主题。

主题中未设置的属性将回退到Style 中定义的值。

以下示例定义了浅色、深色和高对比度主题,每个主题为控件提供了不同的颜色:

Style {
    light: Theme {
        control {
            text.color: "#202020"
            background.color: "#f0f0f0"
            background.border.color: "#d0d0d0"
            background.shadow.color: "#c0c0c0"
            hovered.background.color: "#e0e0e0"
        }
        applicationWindow.background.color: "gainsboro"
        button.hovered.background.color: "#4a90d9"
        radioButton.indicator.foreground.color: "#d0d0d0"
        switchControl.indicator.foreground.color: "lightslategray"
        switchControl.handle.color: "white"
    }

    dark: Theme {
        control {
            text.color: "#e0e0e0"
            background.color: "#404040"
            background.border.color: "#606060"
            background.shadow.color: "#222222"
            hovered.background.color: "#505050"
        }
        applicationWindow.background.color: "#2b2b2b"
        button.hovered.background.color: "#6ab0f9"
        radioButton.indicator.foreground.color: "#606060"
        switchControl.indicator.foreground.color: "#505050"
        switchControl.handle.color: "#808080"
    }

    CustomTheme {
        name: "HighContrast"
        theme: Theme {
            control {
                text.color: "black"
                text.bold: true
                background.color: "white"
                background.border.color: "black"
                background.border.width: 3
                background.shadow.visible: false
                hovered.background.border.width: 5
            }
            applicationWindow.background.color: "white"
            itemDelegate.hovered.text.color: "white"
            itemDelegate.hovered.background.color: "black"
            itemDelegate.background.border.width: 0
            button.hovered.background.color: "black"
            button.hovered.text.color: "white"
            radioButton.indicator.foreground.color: "white"
            radioButton.checked.indicator.foreground.color: "black"
            switchControl.indicator.foreground.color: "white"
            switchControl.handle.color: "white"
            switchControl.handle.border.color: "black"
            switchControl.handle.border.width: 2
            switchControl.checked.handle.color: "black"
        }
    }
}

有关主题实际应用的完整示例,请参阅StyleKit 快速控件示例。

注意: Qt.labs 模块中的类型在未来版本中不保证保持兼容性。

另请参阅 Style 、CustomTheme 以及StyleKit 属性解析。

© 2026 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.