用例 - 樣式和主題支持

Styling with QML involves creating a visual type and binding that to a property or by directly assigning a value to a property. For types that incorporate Qt Quick's delegates the visual type attaches to the delegate 特性。

當使用 Qt Quick Controls , the controls automatically set the appropriate style from the respective platforms .

使用樣式化 QML 類型

The controls 擁有 style property to which the styling types bind. The controls have a corresponding styling type from the Qt Quick Controls Styles 模塊。例如, Button 擁有 ButtonStyle 類型和 Menu 擁有 MenuStyle type. The styling types provide properties applicable to their respective controls such as the background, label, or for some controls, the cursor appearance.

Button {
    text: qsTr("Hello World")
    style: ButtonStyle {
        background: Rectangle {
            implicitWidth: 100
            implicitHeight: 25
            border.width: control.activeFocus ? 2 : 1
            border.color: "#FFF"
            radius: 4
            gradient: Gradient {
                GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#fff" }
                GradientStop { position: 1 ; color: control.pressed ? "#000" : "#fff" }
            }
        }
   }
					

注意: Qt Quick Controls Styles 在 Qt 5.1 引入且要求 Qt Quick 2.1.

訪問係統調色闆

The SystemPalette type provides information about the system's palette information. QML applications can use this information to set the appearance of visual types to match the native look-and-feel. In addition, on desktop platforms, different color palettes are employed when changing states, for example, when the application loses keyboard focus.

當使用 controls ,係統顔色已被使用。