使用QML創建界面（轉）

原文轉自 https://blog.csdn.net/rl529014/article/details/51378307

 

在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，將下面的代碼復制進去：

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("取 消")
    }
}

 

效果如下：

 

再切換到設計模式，就可以看到一個簡單的登錄框。運行一下就可以看到效果：

 

當然你也可以運行，效果如下：

 

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