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

时间:2015-12-14 18:54:12

标签: qt styles qml qtquick2 qtquick-designer

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

QML有“类”声明吗?

1 个答案:

答案 0 :(得分:1)

如果要在QML中声明“类”,则必须创建新的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"
        }
    }
}

这就是它的样子:

image showing example code in action