一、概述

QML的核心特性之一是能够通过QML文档轻松地以轻量级方式定义QML对象类型，以适应各个QML应用程序的需求。标准Qt Quick模块提供了各种类型，如矩形、文本和图像，用于构建QML应用程序；除此之外，您还可以轻松地定义自己的QML类型，以便在应用程序中重用。这种创建自己类型的能力构成了任何QML应用程序的构建块。

二、用QML文件定义对象类型

1. 命名自定义QML对象类型

要创建对象类型，应该将QML文档放在名为 .qml 的文本文件中，其中是类型的所需名称。类型名称有以下要求。

它必须由字母数字字符或下划线组成。
它必须以大写字母开头。

然后引擎自动将该文档识别为QML类型的定义。此外，在解析QML类型名称时，引擎在直接目录中搜索时，以这种方式定义的类型可自动用于同一目录中的其他QML文件。这种其实就是通过相对路径来访问的模块。

2. 自定义QML类型定义

例如，下面是一个文档，它声明了一个具有子鼠标区域的矩形。文档已经保存到文件SquareButton.qml中:

  // SquareButton.qml
  import QtQuick 2.0

  Rectangle {
    
    
      property int side: 100
      width: side; height: side
      color: "red"

      MouseArea {
    
    
          anchors.fill: parent
          onClicked: console.log("Button clicked!")
      }
  }

因为文件名为 SquareButton.qml，这现在可以被同一目录中的任何其他qml文件用作名为 SquareButton 的类型。例如，如果有一个myapplication。在同一个目录下的qml文件中，它可以引用SquareButton类型:

  // myapplication.qml
  import QtQuick 2.0

  SquareButton {
    
    }

这创建了一个100 x 100的红色矩形，内有一个鼠标区，定义在 SquareButton.qml 中。当我的应用程序。引擎加载qml文档，加载SquareButton。qml文档作为一个组件，并实例化它以创建一个 SquareButton 对象。

SquareButton 类型封装了 SquareButton.qml 中声明的QML对象树。当QML引擎从这个类型实例化一个SquareButton对象时，它是从SquareButton. QML中声明的矩形树实例化一个对象。

注意:在某些文件系统(尤其是UNIX)上，文件名的字母大小写是重要的。建议文件名的大小写与所需的QML类型名称的大小写完全匹配，例如Box。qml而不是BoX。qml -无论qml类型将部署到哪个平台。

3. 导入在当前目录之外定义的类型

如果SquareButton。QML和我的应用程序不在同一个目录下。在qml中，SquareButton类型需要通过myapplication.qml中的import语句来指定。它可以从文件系统的相对路径导入，也可以作为一个已安装的模块;更多细节请参见模块。

三、自定义类型的可访问属性

.qml 文件中的根对象定义定义了QML类型可用的属性。属于这个根对象的所有属性、信号和方法——无论是自定义声明的，还是来自根对象的QML类型的——都是外部可访问的，并且可以为这种类型的对象读取和修改。

例如，SquareButton中的根对象类型。上面的qml文件是矩形的。这意味着可以为SquareButton对象修改由Rectangle类型定义的任何属性。

下面的代码定义了三个SquareButton对象，它们为类型为SquareButton的根Rectangle对象的某些属性定义了自定义值:

  // application.qml
  import QtQuick 2.0

  Column {
    
    
      SquareButton {
    
     side: 50 }
      SquareButton {
    
     x: 50; color: "blue" }
      SquareButton {
    
     radius: 10 }
  }

在这里插入图片描述

自定义QML类型的对象可访问的属性包括为对象额外定义的任何自定义属性、方法和信号。例如，假设SquareButton中的矩形。QML定义如下，具有额外的属性、方法和信号:

// SquareButton.qml
  import QtQuick 2.0

  Rectangle {
    
    
      id: root

      property bool pressed: mouseArea.pressed

      signal buttonClicked(real xPos, real yPos)

      function randomizeColor() {
    
    
          root.color = Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
      }

      property int side: 100
      width: side; height: side
      color: "red"

      MouseArea {
    
    
          id: mouseArea
          anchors.fill: parent
          onClicked: root.buttonClicked(mouse.x, mouse.y)
      }
  }

任何SquareButton对象都可以使用添加到根矩形上的pressed属性、buttonClicked信号和randomizeColor()方法:

 // application.qml
  import QtQuick 2.0

  SquareButton {
    
    
      id: squareButton

      onButtonClicked: {
    
    
          console.log("Clicked", xPos, yPos)
          randomizeColor()
      }

      Text {
    
     text: squareButton.pressed ? "Down" : "Up" }
  }

注意SquareButton中定义的任何id值。SquareButton对象不能访问qml，因为id值只能在声明组件的组件范围内访问。

上面定义的SquareButton对象不能引用mouseArea来引用mouseArea子对象，而且如果它的id是root而不是SquareButton，就不会与SquareButton中定义的root对象的id发生冲突。QML作为两者将在单独的作用域内声明。

QML - 通过QML文档定义对象类型

通过QML文档定义对象类型