QML学习【一】QML语言基础

QML语言基础

首先我们要理解QML语言是什么，我们可以了联想C++与STL的关系来理解QML与Qt Quick的关系、QML是一种说明性语言，支持ECMAScript表达式。如果说你有学习过QT那么学习QML我相信也不是一件难事，之前在QT时用QSS来制作很好看到样式，在QML中这一切都变得简单，QML提供了高可读性、声明式、类CSS的语法

1.对象

如果我们创建一个最简单的qml文件：

import QtQuick

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
}

1
2
3
4
5
6
7
8
9

这个文件最上面的import语句，就是将QtQuick模块引入，下面的window{} 语句就是定义了一个window对象，对象的后面需要加上花括号{}。那么我们第一步定义对象就很简单只需要类名＋{}，其他的我们先省略。

那么我们再看一组例子

ApplicationWindow {
    width: 640
    height: 480
    visible: true
    title: qsTr("ImageView")
    Image {
        id: mqm
        source: "image/14.png"
        anchors.fill: parent
        fillMode: Image.PreserveAspectFit
    }
 }
1
2
3
4
5
6
7
8
9
10
11
12

这里我们创建了一个ApplicationWindow的对象其中又包含了一个Image对象，说明对象之间可以进行嵌套。

这里所提到的Window、 ApplicationWindow和Image都是Qt Quick所提供的内置类，我们这里先只讲对象

2.属性

QML当中的属性就相当于类的成员变量，拿我们上面的例子来说

ApplicationWindow {
    width: 640
    height: 480
    visible: true
    title: qsTr("ImageView")
	Image {
    	id: mqm
   		 source: "image/14.png"
    	anchors.fill: parent
    	fillMode: Image.PreserveAspectFit
	}
}
1
2
3
4
5
6
7
8
9
10
11
12

width、height以及下面的都是我们对象的属性，如你所见，他们的初始化语句为

property:value
1

本人非常喜欢这种可以不写；的语句，也是我一直学习QML的动力，但是可以在后面写上；也是自然没有问题，如果说多个属性不想分行书写想写在一行，就必须用；隔开如：

Image {  id: mqm；source: "image/14.png"；anchors.fill: parent；fillMode: Image.PreserveAspectFit；}
1

2.1 属性的类型

一个属性所对应的值都是有类型的，下面是我们常用的类型：

这些类型都是ECMAScript语言的基本类型相对性的

也可以在帮助文档中搜索QML Basic Types 进行了解

注意：属性类型的值只能为该属性匹配的值，拿我们上面的例子举例

Window {
    width: 640 //int
    height: 480 //int
    visible: true //bool
}
1
2
3
4
5

2.2列表属性

QML对象的列表属性(类型为list) 话不错说我们先看例子

import QtQuick 2.0

Item {
    width: 100; height: 100

    states: [
        State { name: "activated" },
        State { name: "deactivated" }
    ]

    Component.onCompleted: {
        console.log("Name of first state:", states[0].name)
        for (var i = 0; i < states.length; i++)
            console.log("state", i, states[i].name)
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

看着很长我们把我们来简化一下：

Item { 
states: [
    State { },
    State {  }
]
Component.onCompleted: {}
}
1
2
3
4
5
6
7

这里states就是我们的代码块和Array一样 可以用[value1,value2…]来给list对象赋值，相信大家也发现了我们可以通过states[i]进行访问其中的变量。

注意 QML中列表中包含的只能是QML对象，如果想要包含int bool 等字面量就要用val 变量，这点与其他语言不同。

大家肯定会对例子中Component.onCompleted有疑问，如果你学过QT这个就是QT当中的槽函数，我把这部分内容放到了最下面

3.表达式

其实如我们开头所说，QML是支持ECMAScript表达式的，我们上面的代码实际上就是ECMAScript表达式

ApplicationWindow {
    width: 640
    height: 480
    visible: true
    title: qsTr("ImageView")
	Image {
    	id: mqm
   		 source: "image/14.png"
    	anchors.fill: parent
    	fillMode: Image.PreserveAspectFit
	}
}
1
2
3
4
5
6
7
8
9
10
11
12

可能不好看我们就将他简化

ApplicationWindow {
    width: 640
    height: 480
    visible: true
}
1
2
3
4
5

这样就初始化了ApplicationWindow对象的宽和高以及是否可见等属性。若你很想知道上面长代码的意思，这里的id(mqm)就是这里Image对象的唯一id ，每个对象都可以指定一个id，我们可以通过这个id来引用某个对象 ，访问他自身所拥有的属性和方法，就相当于C++中的全局变量。source就是指出图片所在路径，anchors这个这里就先掠过，fillmode我们也先别管吧。我们先知道QML语法就ok了。

4.信号处理器（槽）

在QT中我们定义槽都是要直接定义槽函数，QML作为替代品肯定将这一概念进行延续，在QML中我们是直接定义on就可以对槽函数进行定义了

Component.onCompleted: {
        console.log("Name of first state:", states[0].name)
        for (var i = 0; i < states.length; i++)
            console.log("state", i, states[i].name)
    }
1
2
3
4
5

那如果是QT中的按钮的clicked()就可以写成：onClicked:

结语

本人在学习QML时在网上发现资源太少太杂，本人英语基础很差，硬生生的逼着自己开始看帮助文档，发现学QT以及QML总归不能脱离帮助文档，希望本文章对你有帮助，之前C++也出过类似文章，不过由于太耗费时间，网上也肯定有比我总结的更好的文章，还看到了别的博主的总结，写的太好了，于是就没有更新下去，希望能跟大家一起进步，如果感觉还不错麻烦点个赞，能够给予我继续更下去的动力，如果觉得不好或者说有错误，欢迎评论指正，希望我们一同学习一同进步。