Qt Quick、QML01——QML内容结构介绍

一、从Window 窗口组件开始

在 Qt Quick 的世界里，Window对象用于创建一个与操作系统相关的顶层窗口，而其他元素，如Text、Rectangle、Image等，都是在Window提供的场景内表演的演员。Window还有一个派生类，即大名鼎鼎的ApplicationWindow，也可以作为QML文档的根对象。ApplicationWindow有点儿像QMain Window，有menuBar、toolBar、statusBar属性，分别用来设置菜单、工具栏、状态栏;还有contentIltem，可以用来设置内容元素的尺寸属性。前面我们提到的使用QQuickView加载QML的方式，顶层窗口是由QQuickView创建的。

（一）属性

• 一般的属性：
  
• 附加的属性：

调用方式：

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("test")
    //调用特殊属性
    Text {
        y:10
        text: Window.active ? "active" : "inactive"
    }

    Text {
        y:50
        text: Window.activeFocusItem ? "鼠标焦点落在窗口上" : "鼠标焦点没有落在窗口上"
    }

    Text {
        y:100
        text: Window.visibility ==Window.Maximized ? "窗口是最大" : "不是"
    }
    Text {
        y:150
        text: "窗口高="+Window.height +" 窗口宽="+Window.width
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

属性表

flags 表：

使用方式：

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("123Li")
    color: "#0078D7"
    flags: "Dialog"
}    
1
2
3
4
5
6
7
8

visibility 表

（二）信号和处理器（槽函数）（通用）

参考：【QT】QML中的信号和函数

语法格式 : 一般都是这个形式 on，比如信号是clicked()，那么处理器就是onClicked

如何查看QT自带的信号对应的处理器：
根据文档定位信号：

使用也比较简单，系统发出信号后直接用处理器处理就好。

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("123Li")
    color: "#0078D7"
    flags: "Dialog"
    //信号处理：当关闭窗口时，qt会发射信号 void closing(CloseEvent close)
	 onClosing: console.log(qsTr("关闭窗口"))
	 //信号处理：
    onClosing: {
         console.log(qsTr("第二种写法，推荐"))
    }
    //信号处理：方式三
    onClosing: {
         close1();
    }
    //调用函数,注意自己的函数名不能跟qt库的名字一样
    function close1(){
       console.log(qsTr("关闭窗口"))
    }
}    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

（三）调用函数（通用）

window窗口组件有一下函数。

一个调用函数的例子：

注意：Button 组件需要导入对应版本的包

import QtQuick.Controls 2.2
1

如果不知道版本可以搜索一下：

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

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

    Button {
        x:100  //设置按钮的横坐标
        y:200  //设置纵坐标
        text:"我是按钮"   //按钮标题

        //信号槽连接
        onClicked: {
            console.log("我被点击了")
            //调用window 提供的方法隐藏窗口
            window.hide()
        }
    }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

（四）变量（通用）

在qml中还能声明变量。具体如下：

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {

    property int num: 0
    //创建一个变量，初始值为0
    property int currentMenu: 0
    //创建一个自读的变量
    readonly property var menuWidth: 100

    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Text {
        //text: 后面跟着的是一个匿名函数
        text: {
            return "初始值: "+"currentMenu="+window.currentMenu+"menuWidth="+window.menuWidth;
        }
    }


    Button {
        y:20  //设置纵坐标
        text:"按钮"   //按钮标题

        //信号槽连接
        onClicked: {
            num++;
            //menuWidth = menuWidth++; 会报错，被readonly 变量被声明后不能修改
            currentMenu=10+currentMenu;
            console.log("toString:"+currentMenu.toString());
            console.log("valueOf:"+currentMenu.valueOf());
        }
    }

    Text {
        y: 80
        text: "num="+window.num
    }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

（五）Math类使用（通用）

Math 有下列方法：

max(x, y)，返回 x 和 y 中的最大值。

min(x, y)，返回 x 和 y 中的最小值。

abs(x)，返回数的绝对值。

sqrt(x),返回数的平方根。

pow(x, y)，返回 x 的 y 次幕。

random()，返回 0〜1 之间的随机数。

sin(x)，返回数的正弦值。

asin(x)，返回数的反正弦值。

exp(x)，返回 e 的指数。

log(x)，返回数的自然对数（底为 e)。

valueOf()，返回 Math 对象的原始值。

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {

    property int num: 0
    //创建一个变量，初始值为0
    property int currentMenu: 0
    //创建一个自读的变量
    readonly property var menuWidth: 100

    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Text {
        //text: 后面跟着的是一个匿名函数
        text: {
            return "初始值: "+"currentMenu="+window.currentMenu+"menuWidth="+window.menuWidth;
        }
    }


    Button {
        y:20  //设置纵坐标
        text:"按钮"   //按钮标题

        //信号槽连接
        onClicked: {
            num++;
            //menuWidth = menuWidth++; 会报错，被readonly 变量被声明后不能修改
            currentMenu=10+currentMenu;
            console.log("toString:"+currentMenu.toString());
            console.log("valueOf:"+currentMenu.valueOf());
        }
    }

    Text {
        y: 80
        text: "num="+window.num
    }


    Text{
        id: result
        y: 100
    }
    Rectangle{
        width: 80
        height: 20
        y: 120
        color: "#F0F0F0"
        TextEdit{
            id: mathText
            width: 80
            height: 20
            color: "#BCBEBF"
            onEditingFinished: {
                console.log("输入的内容为:"+mathText.text)
            }
        }
    }

    Button {
        y:180  //设置纵坐标
        text:"按钮"   //按钮标题

        //信号槽连接
        onClicked: {
            var tpye = mathText.getText(0,10);
            console.log(tpye)
            if(tpye==="max"){
                result.text = Math.max(10,11);
            }
           switch(tpye){
           case "min":
               result.text = Math.mix(10,11);
               break;
           case "abs":
               result.text = Math.abs(-1);
               break;
           case "random":
               result.text = Math.random(10);
               break;
           }
        }
    }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

二、更多属性介绍

（一）分组属性

font属性的类型本身是一个对象,这个对象又有pixelSize,bold, italic、underline等属性。对于类型为对象的属性值，可以使用“.”操作符展开对象的每一个成员对其赋值，也可以通过分组符号(一对花括号）把要赋值的成员放在一起给它们赋值。对于后者，其形式就和对象的定义一样了，起码看起来没有区别。所以，又可以这么理解上面的示例:Text对象内聚合了font对象。OK，就是聚合。来自《Qt Quick核心编程》

Text {
 	y: 80
    text: "hello"
    //对于font就是分组属性，它是一个对象，里面有许多属性，写法一
    font.family: "黑体"
    font.bold: true
    //写法二
    font {pointSize: 20; underline: true}
}
1
2
3
4
5
6
7
8
9

三、QML对象树

先看例子：

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

Window {
    property int num: 0
    //创建一个变量，初始值为0
    property int currentMenu: 0
    //创建一个自读的变量
    readonly property var menuWidth: 100

    id: window
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    //函数,注意自己的函数名不能跟qt库的名字一样
    function printf(){
       console.log(qsTr("hello"))
    }


    Text {
        id: text1
        text: "text1"
    }

    Button {
    	id: btn
        y:20  
        text:"按钮"   //按钮标题

        //发出点击事件信号后、处理器处理逻辑（槽函数）
        onClicked: {
     		console.log("点击了按钮。");
     		//调用别人的方法
     		window.printf();
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

对于上面的例子，整个Window{}就是一个对象树，Window是对象树的根，Window有两个孩子，id分别为text1和btn。在对象树中，对象之间通过id相互调用别人的属性和方法。

四、Qt Quick App启动方式

• QQmlApplicationEngine搭配Window。
• QQuickView搭配Item。

两者的不同之处在于:使用OOuickView 显示OML文档，对窗口的控制权（比如设置窗口标题、Icon、窗口的最小尺寸等）在C++代码:而使用OOmIApplicationEngine加载以Window为根对象的QML文档，QML文档则拥有窗口的完整控制权，可以直接设置标题、窗口尺寸等属性。

五、ltem组件

是不是在查看文档时发现很多组件的许多属性都没有介绍，因为ltem是 Qt Quick中所有可视元素的基类，虽然它自己什么也不绘制，但是它定义了绘制图元所需要的大部分通用属性，比如x、y、width、height、锚定（( anchoring）和按键处理。因此对于一些通用属性，一些组件的文档不会重复介绍。

（一）属性表

官方文档提供了以下属性通用，有一些在window窗口已经遇到过。

如果下载了qt，找到qt安装目录下的：你的安装目录/Docs/Qt-5.9.3/qtquick/qml-qtquick-item.html双击打开查看

属性表

anchors表

anchors.top : AnchorLine
anchors.bottom : AnchorLine
anchors.left : AnchorLine
anchors.right : AnchorLine
anchors.horizontalCenter : AnchorLine
anchors.verticalCenter : AnchorLine
anchors.baseline : AnchorLine
anchors.fill : Item
anchors.centerIn : Item
anchors.margins : real
anchors.topMargin : real
anchors.bottomMargin : real
anchors.leftMargin : real
anchors.rightMargin : real
anchors.horizontalCenterOffset : real
anchors.verticalCenterOffset : real
anchors.baselineOffset : real
anchors.alignWhenCentered : bool

- focus 、activeFocusOnTab、activeFocus 使用例子如下：

import QtQuick 2.6
import QtQuick.Window 2.2

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

    Item{
        id: item
        x: 100
        y: 10
        //与html的index一样，数值越大，越位于最上面
        z: 1
        width: 100
        height: 100
        Rectangle {
            id: rectangle
            width: 100; height: 150
            color: "#4B92F1"
            FocusScope {
                id: focusScope
                focus: true
                TextInput {
                    id: input1
                    y:10
                    width: rectangle.width
                    //能否获取输入焦点
                    focus: true
                    //这个属性为ture才可以通过tap键，快速切换到下一个输入框
                    activeFocusOnTab: true
                    text: "1"
                }

                TextInput {
                    id: input2
                    y:40
                    width: rectangle.width
                    focus: true
                    //activeFocusOnTab:true
                    text: "2"
                }

                TextInput {
                    id: input3
                    y:70
                    width: rectangle.width
                    focus: true
                    activeFocusOnTab:true
                    text: "3"
                }
            }
        }

        Text {
            id: text
            y: 90
            //是否获得焦点，如果input1获得焦点，那么为true
            text: input1.activeFocus
        }

    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

瞄点的介绍

图片来自《Qt Quick核心编程》

注意：topMargin 、bottomMargin、leftMargin、rightMargin。需要跟top 、bottom、left、right一 一对应使用。
比如：使用了left定位组件，那么想要修改边距，那么只能通过leftMargin修改左边距，不能通过rightMargin修改右边距。

六、FileDialog

FileDialog 是一个弹窗组件，父类为Dialog。在使用FileDialog 时需要先去了解Dialog组件有哪些属性、函数、信号。

一些属性

1. nameFilter ：nameFilter 根据文件后缀名筛选文件。
2. title：设置文件弹出框的名字

信号处理器

onAccepted: {
console.log("选择:"+fileDialog.fileUrl);
}
//取消选择
onRejected: {
     console.log("取消:");
}
1
2
3
4
5
6
7

实例

声明FileDialog组件后，组件不会显示出来，因为它是一个Dialog（弹框组件）类型。需要配合其他组件使用，最常见的是按钮。调用open() 这个函数后会显示出来。

Button {
     width: 100
     height: 50
     id: but2
     text: "选择文件"
     style: butStyle
     onClicked: {
     	//打开弹框
         fileDialog.open()
     }
}
FileDialog {
    id: fileDialog
    nameFilters: ["Text files (*.txt)", "HTML files (*.html *.htm)"]
    title: "选择文件"
    //选择文件
    onAccepted: {
    	//获取选择的文件路径
        console.log("选择:"+fileDialog.fileUrl);
    }
    //取消选择
    onRejected: {
         console.log("取消:");
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25