使用QML来创建界面
前面两节介绍了 Qt Widgets Application 工程,可以使用纯C++代码,或C++和XML结合的方式来创建GUI程序。这节来看看如何使用 QML。
Qt Quick Application、Qt Quick Controls Application 和 Qt Canvas 3D Application 工程都可以使用 QML 来创建界面。Quick Controls 比 Quick 多一些控件,暂时也不会涉及3D动画,所以我们选择 Quick Controls 工程,如下图所示:
与 Widgets 工程相比,Quick Control 多出了几个文件:
main.qml 是 QML 文件,它的后缀就是
切换到设计模式,就可以从左侧的面板中看到 QML 的基本元素、控件、布局等,这些都可以拖拽到中间的编辑区。
main.qml 是可以编辑的,打开 main.qml,将下面的代码复制进去:
上面我们只是用 QML 绘制了界面,并没有使用 JavaScript。
Qt Quick Application、Qt Quick Controls Application 和 Qt Canvas 3D Application 工程都可以使用 QML 来创建界面。Quick Controls 比 Quick 多一些控件,暂时也不会涉及3D动画,所以我们选择 Quick Controls 工程,如下图所示:
与 Widgets 工程相比,Quick Control 多出了几个文件:
main.qml 是 QML 文件,它的后缀就是
.qml
。qml.qrc 是资源文件,主要包含了 QML 文件的路径,以确保 QML 引擎能够找到文件。deployment.pri 是工程文件 QuickControlsDemo.pro 的辅助文件。切换到设计模式,就可以从左侧的面板中看到 QML 的基本元素、控件、布局等,这些都可以拖拽到中间的编辑区。
main.qml 是可以编辑的,打开 main.qml,将下面的代码复制进去:
import QtQuick 2.3 import QtQuick.Controls 1.2 ApplicationWindow { visible: true width: 400 height: 210 color: "#ffffff" title: qsTr("QuickControlsDemo") Text { id: text1 x: 47 y: 35 width: 80 height: 30 text: qsTr("用户名:") horizontalAlignment: Text.AlignRight verticalAlignment: Text.AlignVCenter font.pixelSize: 14 } TextField { id: textField1 x: 137 y: 35 width: 200 height: 30 placeholderText: qsTr("请输入用户名") } Text { id: text2 x: 47 y: 85 width: 80 height: 30 text: qsTr("密 码:") verticalAlignment: Text.AlignVCenter font.pixelSize: 14 horizontalAlignment: Text.AlignRight } TextField { id: textField2 x: 137 y: 85 width: 200 height: 30 echoMode: 2 placeholderText: qsTr("请输入密码") } Button { id: button1 x: 71 y: 145 width: 116 height: 36 text: qsTr("登 录") } Button { id: button2 x: 224 y: 145 width: 110 height: 36 text: qsTr("取 消") } }再切换到设计模式,就可以看到一个简单的登录框。运行一下就可以看到效果: