qt 快速 QML 应用程序的自定义样式页面（如 HTML 和 CSS）

Question

是否可以在 QT 中创建自定义样式文件并将其应用于所有 QML 文件（例如 CSS 确实适用于 HTML）？

QML 有 "class" 声明吗？

Answer 1

如果您想在 QML 中声明 "class"，您必须创建新的 QML 文件。它的名称必须以大写字母开头。您还可以使用 C++ 创建自定义对象，但这可能不是您要找的。

假设您要创建自定义 Text 元素，以便文本始终居中并适合给定的尺寸。因此，您创建一个名为 CustomText.qml 的文件并写入：

/* CustomText.qml file */    

import QtQuick 2.0

Text {
    id: customText
    horizontalAlignment: Text.AlignHCenter
    verticalAlignment: Text.AlignVCenter
    clip: true
    fontSizeMode: Text.Fit
    font.pixelSize: height
    wrapMode: Text.WordWrap
    minimumPixelSize: 3
    color: "black"

    /* using these lines you can set custom font loaded from a file */
//    font.family: customFont.name
//    FontLoader {
//        id: customFont
//        source: "qrc:/myCustomFont.ttf"
//    }
}

现在你可以这样使用了：

/* main.qml file */
import QtQuick 2.3
import QtQuick.Window 2.2

Window {
    visible: true

    width: 300
    height: 300

    Rectangle {
        id: rectangle1
        color: "lightgrey"
        x: 5
        y: 5
        width: 200
        height: 50

        CustomText {
            anchors.fill: parent
            text: "testing custom text object"
        }
    }

    Rectangle {
        id: rectangle2
        color: "lightgrey"
        anchors.left: rectangle1.left
        anchors.top: rectangle1.bottom
        anchors.topMargin: 5
        width: 50
        height: 50

        CustomText {
            anchors.fill: parent
            text: "testing custom text object"
        }
    }

    Rectangle {
        id: rectangle3
        color: "lightgrey"
        anchors.left: rectangle2.left
        anchors.top: rectangle2.bottom
        anchors.topMargin: 5
        width: 100
        height: 100

        CustomText {
            anchors.fill: parent
            text: "testing custom text object"
        }
    }
}

这就是它的样子：

qt 快速 QML 应用程序的自定义样式页面（如 HTML 和 CSS）

Custom style page for qt quick QML aplications (like HTML and CSS)

qt

styles

qml

qtquick2

qtquick-designer