QML教程（一）基础语法

文子阳

已于 2023-01-02 10:20:27 修改

阅读量2.3k

点赞数

分类专栏： QML 文章标签： css html5 前端 qml

于 2023-01-01 22:51:18 首次发布

本文链接：https://blog.csdn.net/wenxingchen/article/details/128515623

版权

QML 专栏收录该内容

8 篇文章 15 订阅

订阅专栏

一、导入

模块导入
语法：

import <ModuleIdentifier> [<Version.Number>] [as <Qualifier>]

例：

import QtQuick

import QtQuick 2.10

import QtQuick as Quick

目录导入
语法：

import "<DirectoryPath>" [as <Qualifier>]

例：

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

二、对象声明

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

Rectangle {
    width: 100
    height: 100
    color: "red"
}
```

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

import QtQuick 2.0

Rectangle {
    width: 100
    height: 100

    gradient: Gradient {
        GradientStop { position: 0.0; color: "yellow" }
        GradientStop { position: 1.0; color: "green" }
    }
}

视觉场景中的子对象
视觉场景中父子关系的概念由模块中的 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")
    }
}

坐标
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"
        }
    }
}
```
堆叠
Qt Quick 项目使用递归绘制算法来确定在发生碰撞时将哪些项目绘制在顶部。通常，项目按照创建顺序（或在 QML 文件中指定z属性：低于0的z值将堆叠在父级下方）绘制在其父项目之上。z值的越大，优先级越高，但仅限于同父级比较，如果父级优先级低于其他父级，即使子级z值极大，也不会比其他父级要高。

注释
单行注释以 // 开头，在行尾结束。
多行注释以 /* 开头，以 */ 结尾
例：

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 <propertyType> <propertyName>

例：

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<Rectangle> siblingRects
    property list<Rectangle> 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 语法:

<PropertyModifierTypeName> on <propertyName> {
    // 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<Signal 声明>其中 <Signal> 是信号的名称，第一个字母大写。信号处理程序必须在发出信号的对象的定义中声明，并且处理程序应包含调用信号处理程序时要执行的 JavaScript 代码块。

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

import QtQuick 2.0

Item {
    width: 100; height: 100

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

语法：

signal <signalName>[([<parameterName>: <parameterType>[, ...]])]

例：

import QtQuick 2.0

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

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

id.actionPerformed("something", 1)

处理信号：
on<Signal>：fun即可

onDeactivated: console.log("Deactivated!")

属性更改信号处理器：

on<Property>Changed

例：

import QtQuick 2.0

TextInput {
    text: "Change this!"

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

3.方法属性

语法：

function <functionName>([<parameterName>[: <parameterType>][, ...]]) [: <returnType>] { <body> }

例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.对象属性赋值

初始化时的值赋值

<propertyName> : <value>

import QtQuick 2.0

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

命令式值赋值

[<objectId>.]<propertyName> = 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"
    }
}