使用QML来创建界面

在Qt编程中，我们可以使用纯C++代码，或C++和XML结合的方式来创建GUI程序。

下面我介绍一下如何在Qt Creater中用QML创建GUI程序。

首先打开Qt Creater，选择“Qt Quick Application”：

然后选择Qt Quick Component Set的版本，注意此处的版本要和程序中导入的版本一致。

新建完成后，显示的界面如下：

与 Widgets 工程相比，Quick Control 多出了几个文件：

• main.qml 是 QML 文件，它的后缀就是.qml。qml.qrc 是资源文件，主要包含了 QML 文件的路径，以确保 QML 引擎能够找到文件。
• deployment.pri 是工程文件 QuickControlsDemo.pro 的辅助文件。

切换到设计模式，就可以从左侧的面板中看到 QML 的基本元素、控件、布局等，这些都可以拖拽到中间的编辑区。


main.qml 是可以编辑的，打开 main.qml，将下面的代码复制进去：

[cpp]  view plain  copy

1. import QtQuick 2.3  
2. import QtQuick.Controls 1.2  
3.   
4. ApplicationWindow {  
5.     visible: true  
6.     width: 400  
7.     height: 210  
8.     color: "#ffffff"  
9.     title: qsTr("QuickControlsDemo")  
10.   
11.     Text {  
12.         id: text1  
13.         x: 47  
14.         y: 35  
15.         width: 80  
16.         height: 30  
17.         text: qsTr("用户名：")  
18.         horizontalAlignment: Text.AlignRight  
19.         verticalAlignment: Text.AlignVCenter  
20.         font.pixelSize: 14  
21.     }  
22.   
23.     TextField {  
24.         id: textField1  
25.         x: 137  
26.         y: 35  
27.         width: 200  
28.         height: 30  
29.         placeholderText: qsTr("请输入用户名")  
30.     }  
31.   
32.     Text {  
33.         id: text2  
34.         x: 47  
35.         y: 85  
36.         width: 80  
37.         height: 30  
38.         text: qsTr("密  码：")  
39.         verticalAlignment: Text.AlignVCenter  
40.         font.pixelSize: 14  
41.         horizontalAlignment: Text.AlignRight  
42.     }  
43.   
44.     TextField {  
45.         id: textField2  
46.         x: 137  
47.         y: 85  
48.         width: 200  
49.         height: 30  
50.         echoMode: 2  
51.         placeholderText: qsTr("请输入密码")  
52.     }  
53.   
54.     Button {  
55.         id: button1  
56.         x: 71  
57.         y: 145  
58.         width: 116  
59.         height: 36  
60.         text: qsTr("登 录")  
61.     }  
62.   
63.     Button {  
64.         id: button2  
65.         x: 224  
66.         y: 145  
67.         width: 110  
68.         height: 36  
69.         text: qsTr("取 消")  
70.     }  
71. }  

效果如下：

再切换到设计模式，就可以看到一个简单的登录框。运行一下就可以看到效果：

当然你也可以运行，效果如下：

读者可以好好研究一下QML文件，了解其基本语法和格式。