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

Question

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

QML中是否有任何“类”声明？

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

这就是它会是什么样子：