QML教程（一）基础语法

目录

一、导入

二、对象声明

 三、对象属性

1.声明对象属性

2.信号属性

3.方法属性

4.附加属性略 

5.枚举属性 

6.对象属性赋值

四、自定义对象

---

一、导入

1. 模块导入
   语法：

   import  [] [as ]

   例：

   import QtQuick

   import QtQuick 2.10

   import QtQuick as Quick

2. 目录导入
   语法：

   import "" [as ]

   例：

   import "../privateComponents"
   import "../textwidgets" as MyModule

二、对象声明

1. 对象
   对象声明由其对象类型的名称组成，后跟一组大括号。然后，所有属性和子对象都在这些大括号内声明。例：

   import QtQuick 2.0
   
   Rectangle {
       width: 100
       height: 100
       color: "red"
   }

2. 对象树中的子对象
   任何对象声明都可以通过嵌套对象声明定义子对象。这样，任何对象声明都会隐式声明可能包含任意数量的子对象的对象树。例：

   import QtQuick 2.0
   
   Rectangle {
       width: 100
       height: 100
   
       gradient: Gradient {
           GradientStop { position: 0.0; color: "yellow" }
           GradientStop { position: 1.0; color: "green" }
       }
   }

3. 视觉场景中的子对象
   视觉场景中父子关系的概念由模块中的 Item 类型提供，这是大多数 QML 类型的基本类型，因为大多数 QML 对象都是要直观呈现的。例如，“矩形”和“文本”都是基于Item的类型

   import QtQuick 6.2
   
   Rectangle {
       width: 200
       height: 200
       color: 'red'
   
       data: [
           Text {
               anchors.centerIn: parent
               text: qsTr("Hello QML")
           }
       ]
   }
   

   简写形式

   import QtQuick 6.2
   
   Rectangle {
       width: 200
       height: 200
       color: 'red'
   
       Text {
           anchors.centerIn: parent
           text: qsTr("Hello QML")
       }
   }
   

4. 坐标
   Qt Quick中使用的默认视觉坐标系统是项目坐标。这是一个笛卡尔坐标系，（0，0） 位于项目的左上角。x 轴向右增长，y 轴向下增长，因此项目的右下角位于坐标（宽度、高度）处。坐标数值是指在其父容器中的坐标。例：

   Rectangle {
       width: 200
       height: 200
       color: "red"
   
       Rectangle {
           x: 100
           y: 100
           width: 100
           height: 100
           color: "blue"
   
           Rectangle {
               width: 50
               height: 50
               color: "green"
           }
       }
   }

   

5. 堆叠
   Qt Quick 项目使用递归绘制算法来确定在发生碰撞时将哪些项目绘制在顶部。通常，项目按照创建顺序（或在 QML 文件中指定z属性：低于0的z值将堆叠在父级下方）绘制在其父项目之上。z值的越大，优先级越高，但仅限于同父级比较，如果父级优先级低于其他父级，即使子级z值极大，也不会比其他父级要高。
6. 注释
   单行注释以 // 开头，在行尾结束。
   多行注释以 /* 开头，以 */ 结尾
   例：

   Text {
       text: "Hello world!"    //a basic greeting
       /*
           We want this text to stand out from the rest so
           we give it a large size and different font.
        */
       font.family: "Helvetica"
       font.pointSize: 24
   }

 三、对象属性

1.声明对象属性

除枚举类型(用int代替)之外的任何 QML 值类型都可以用作自定义属性类型

语法：

[default] [required] [readonly] property  

 例：

Item {
    property int someNumber
    property string someString
    property url someUrl
    property color previousColor
    //var 值类型是一个通用占位符类型，可以保存任何类型的值，包括列表和对象
    property var someNumber: 1.5
    property Rectangle someRectangle
    states: [
        State { name: "loading" },
        State { name: "running" },
        State { name: "stopped" }
    ]
    // 如果list只有一个项，则可以省略[]
    states: State { name: "running" }
    property list siblingRects
    property list childRects: [
        Rectangle { color: "red" },
        Rectangle { color: "blue"}
    ]
}

分组属性

Text {
    //dot notation
    font.pixelSize: 12
    font.b: true
}

Text {
    //group notation
    font { pixelSize: 12; b: true }
}

 默认属性：使用default标注为默认属性，使用时可以不用声明key

// MyLabel.qml
import QtQuick 2.0

Text {
    default property var someText

    text: "Hello, " + someText.text
}

使用时，而这效果相同 

MyLabel {
    Text { text: "world!" }
}

MyLabel {
    someText: Text { text: "world!" }
}

 on 语法:

 on  {
    // attributes of the object instance
}

目前有两种使用方式：

• 属性值写入侦听器
  目前主要用于监听动画属性，例：

  import QtQuick 2.0
  
  Item {
      width: 400
      height: 50
  
      Rectangle {
          width: 50
          height: 50
          color: "red"
  
          NumberAnimation on x {
              from: 0
              to: 350
              loops: Animation.Infinite
              duration: 2000
          }
      }
  }

• 属性值源

2.信号属性

信号是来自对象的通知，指示发生了某些事件：例如，属性已更改、动画已启动或停止，或者图像已下载。例如，鼠标区域类型具有当用户在鼠标区域内单击时发出的单击信号。

每当发出特定信号时，都可以通过信号处理程序通知对象。信号处理程序使用语法 on其中 是信号的名称，第一个字母大写。信号处理程序必须在发出信号的对象的定义中声明，并且处理程序应包含调用信号处理程序时要执行的 JavaScript 代码块。

例如，下面的 onClicked 信号处理程序是在 MouseArea 对象定义中声明的，并在单击 MouseArea 时调用，从而导致打印控制台消息：

import QtQuick 2.0

Item {
    width: 100; height: 100

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

语法：

signal [([: [, ...]])]

例：

import QtQuick 2.0

Item {
    // 无参数可省略括号
    signal clicked
    signal hovered()
    // 指定参数
    signal actionPerformed(action: string, actionResult: int)
}

 发出信号：
直接通过id调用信号即可

id.actionPerformed("something", 1)

处理信号：
on：fun即可

onDeactivated: console.log("Deactivated!")

属性更改信号处理器：

onChanged

例：

import QtQuick 2.0

TextInput {
    text: "Change this!"

    onTextChanged: console.log("Text has changed to:", text)
}

3.方法属性

语法：

function ([[: ][, ...]]) [: ] {  }

例1：

import QtQuick 2.0
Rectangle {
    id: rect

    function calculateHeight() : real {
        return rect.width / 2;
    }

    width: 100
    height: calculateHeight()
}

 例2：

import QtQuick 2.0

Item {
    width: 200; height: 200

    MouseArea {
        anchors.fill: parent
        onClicked: (mouse)=> label.moveTo(mouse.x, mouse.y)
    }

    Text {
        id: label

        function moveTo(newX: real, newY: real) {
            label.x = newX;
            label.y = newY;
        }

        text: "Move me!"
    }
}

4.附加属性
略 

5.枚举属性 

枚举提供一组固定的命名选项。它们可以使用关键字在 QML 中声明：enum

// MyText.qml
Text {
    enum TextType {
        Normal,
        Heading
    }

    property int textType: MyText.TextType.Normal

    font.bold: textType == MyText.TextType.Heading
    font.pixelSize: textType == MyText.TextType.Heading ? 24 : 12
}

6.对象属性赋值

• 初始化时的值赋值

   : 

  import QtQuick 2.0
  
  Rectangle {
      color: "red"
      property color nextColor: "blue" // combined property declaration and initialization
  }

• 命令式值赋值

  [.] = value

  import QtQuick 2.0
  
  Rectangle {
      id: rect
      Component.onCompleted: {
          rect.color = "red"
      }
  }

四、自定义对象

现在我们定义一个消息框对象：MessageLabel
新建QML文件：MessageLabel.qml

// MessageLabel.qml
import QtQuick

Rectangle {
    height: 50
    //声明消息内容:message
    property string message: "debug message"
    //声明消息类型:msgType（debug、warning、critical）
    property string msgType: "debug"
    Column {
        anchors.fill: parent

        Text {
            text: msgType.toString().toUpperCase() + ":"
            font.bold: msgType === "critical"
            color: msgType === "warning" || msgType === "critical" ? "red" : "blue"
            //动画
            ColorAnimation on color {
                running: msgType === "critical"
                from: "red"
                to: "black"
                duration: 1000
                loops: msgType === "critical" ? Animation.Infinite : 1
            }
        }
        Text {
            text: message
            color: msgType === "warning" || msgType === "critical" ? "red" : "blue"
        }
    }

}

使用：

// application.qml
import QtQuick

Column {
    width: 180
    height: 180
    padding: 1.5
    topPadding: 10.0
    bottomPadding: 10.0
    spacing: 5

    MessageLabel{
        width: parent.width - 2
        msgType: "debug"
    }
    MessageLabel {
        width: parent.width - 2
        message: "This is a warning!"
        msgType: "warning"
    }
    MessageLabel {
        width: parent.width - 2
        message: "A critical warning!"
        msgType: "critical"
    }
}