QML学习系列-QML中的样式和主题

最新推荐文章于 2026-04-07 09:52:38 发布

原创

最新推荐文章于 2026-04-07 09:52:38 发布 · 2.5k 阅读

收录于

当前文章被以下社区和专栏收录：

QML支持灵活的样式定义和主题应用，可用于改变组件外观和行为。Style元素允许设置字体、颜色和边框等属性，PropertyChanges可按状态改变组件属性，如鼠标悬停时改变颜色。States定义组件在不同状态下的属性。Theme元素则用于定义应用的全局色彩和字体，通过styleInjection注入到组件中，实现风格统一。

QML中的样式和主题

QML支持灵活的样式定义方式，可以通过定义样式来改变组件的外观和行为。此外，可以通过定义主题来统一应用的样式，从而实现应用的风格统一。

样式

Style

Style是一种用于定义组件样式的元素，可以设置各种属性如字体、颜色、边框等。例如：

Style {
    background: "white"
    font.family: "Arial"
    font.pixelSize: 16
    color: "black"
    border.width: 1
    border.color: "red"
}

这个例子定义了一个白色背景、Arial字体、黑色颜色、红色边框宽度为1的样式。

Property Changes

使用PropertyChanges元素可以在特定状态下更改组件的属性，例如在鼠标悬停时更改颜色。例如：

Button {
    text: "Click Me"
    hoverEnabled: true

    style: Style {
        background: "white"

        PropertyChanges {
            target: parent
            when: hovered
            background: "gray"
        }
    }
}

这个例子创建了一个按钮，当鼠标悬停时，按钮的背景色变为灰色。