QML 提供了几种机制来设置 UI 的样式。以下是三种常用的方法:

方法1:自定义组件

QML支持定义自己的自定义组件,下面,我们创建一个可以随时在UI中改变标题的自定义的 TitleText 组件,如果我们要改变我们的UI的所有标题的外观,我们只需编辑 TitleText.qml,然后所做的更改将应用到所有引用它的地方。

// TitleText.qml
Text {
    horizontalAlignment: Text.AlignHCenter
    font.pixelSize: 50
    color: "green"
}
 
// in use
TitleText {
    text: "Title 1"
}

方法2:Style Singleton
在这种方法中,我们定义一个包含定义的样式属性的Style QML singleton对象,作为一个QML singletons,通用的实例可以从引用该目录的任何地方访问。需要注意的是QML singletons需要一个包含singleton关键字在Style类型定义之前的qmldir文件(比较绕口);它们不能像其他类型那样被隐式包含。当使用QRC资源是Style.qml和qmldir文件必须包含在.qrc资源文件中。

// Style.qml
pragma Singleton
import QtQuick 2.0
QtObject {
    property int textSize: 20
    property color textColor: "green"
}
 
// qmldir
singleton Style Style.qml
 
// in use
import QtQuick 2.0
import "." // QTBUG-34418, singletons require explicit import to load qmldir file
 
Text {
    font.pixelSize: Style.textSize
    color: Style.textColor
    text: "Hello World"
}

方法3:混合(Style Singleton + Custom Component)

在这种方法中,假定我们有一个Style singleton被自定义组件引用。

// Style.qml
import QtQuick 2.0
pragma Singleton
 
QtObject {
    property int titleAlignment: Text.AlignHCenter
    property int titleFontSize: 50
    property color titleColor: "green"
}
 
// TitleText.qml
import QtQuick 2.0
import "." // QTBUG-34418, singletons require explicit import to load qmldir file
 
Text {
    horizontalAlignment: Style.titleAlignment
    font.pixelSize: Style.titleFontSize
    color: Style.titleColor
}
 
// in use
TitleText {
    text: "Title 1"
}

嵌套QtObjects

如果您需要嵌套QtObject访问更多定义的属性(例如border.width.normal),你可以像下面那样做:

// Style.qml
import QtQml 2.2
pragma Singleton
 
QtObject {
 
    property QtObject window: QtObject {
        property color background: "white";
    }
 
    property QtObject border: QtObject {
        property QtObject width: QtObject{
            property int normal: 1;
            property int big: 3;
        }
 
        property QtObject color: QtObject{
            property color normal: "gray";
            property color focus: "blue";
            property color disabled: "red";
        }
    }
}

本文章翻译自:Qml Styling

标签: Qt, QML, 样式, Styling, QML样式

添加新评论