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

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"
        }
    }
}

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

States

States用于在不同状态下设置组件的属性。例如：

Rectangle {
    width: 100
    height: 50

    states: [
        State {
            name: "large"
            when: width > 200
            PropertyChanges { target: rectangle; width: 200 }
        },
        State {
            name: "small"
            when: width < 50
            PropertyChanges { target: rectangle; width: 50 }
        }
    ]
}

这个例子创建了一个矩形，当宽度大于200时，进入“large”状态，将宽度设置为200；当宽度小于50时，进入“small”状态，将宽度设置为50。

主题

Theme

使用Theme元素可以定义应用的主题，包括颜色、字体等。例如：

Theme {
    palette: Palette {
        Window: "#eeeeee"
        Button: "#dddddd"
        TextEdit: "#cccccc"
    }
    font.family: "Arial"
    font.pixelSize: 16
}

这个例子定义了一个主题，其中窗口背景色为#eeeeee，按钮背景色为#dddddd，文本编辑框背景色为#cccccc，字体为Arial，字号为16。

Style Injection

使用styleInjection属性可以将主题样式注入到应用中的所有组件中。例如：

Window {
    styleInjection: true
    
    Button {
        text: "Click Me"
    }

    TextEdit {
        text: "Type something here"
    }
}

这个例子创建了一个窗口，注入了主题样式。窗口中包含一个按钮和一个文本编辑框，它们会自动使用主题样式。

以上是QML中样式和主题部分的简单介绍，希望能对你有所帮助。如果你想深入学习QML，可以查看官方文档[1]和示例代码[2]。

参考资料：

1. https://doc.qt.io/qt-5/qmlapplications.html
2. https://doc.qt.io/qt-5/qtquick-demos.html