QML教程（一）基础语法

太过爱你忘了你带给我的痛 2024-03-30 13:42 71阅读 0赞

**目录**

一、导入

二、对象声明

三、对象属性

1.声明对象属性

2.信号属性

3.方法属性

4.附加属性略

5.枚举属性

6.对象属性赋值

四、自定义对象

--------------------

### 一、导入 ###

1.  模块导入  
    语法：
    
        import <ModuleIdentifier> [<Version.Number>] [as <Qualifier>]
    
    例：
    
        import QtQuick
    
        import QtQuick 2.10
    
        import QtQuick as Quick
2.  目录导入  
    语法：
    
        import "<DirectoryPath>" [as <Qualifier>]
    
    例：
    
        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 对象都是要直观呈现的。例如，“[矩形][Link 1]”和[“文本][Link 2]”都是基于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"
                }
            }
        }
    
    ![33b6d40003d558992c775f3d41d56740.png][]
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 <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"
        }
    }

[Item]: https://doc.qt.io/qt-6/qml-qtquick-item.html
[Link 1]: https://doc.qt.io/qt-6/qml-qtquick-rectangle.html
[Link 2]: https://doc.qt.io/qt-6/qml-qtquick-text.html
[33b6d40003d558992c775f3d41d56740.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/55326c4f64154c9dba2f61898518598b.png