QtQuick QML 快速上手教程-1 QML基礎啓蒙

• 1 什麼是QML

       通俗的講，QML是一種編程語言，用來開發界面用的. QML書寫格式類似於JSON的語法，並支持將命令性JavaScript表達式與動態屬性綁定結合在一起

 

• 2 學習QML的第一步 -通過一個示例來開始學習QML

創建一個QML文件

每個QML文件都由兩部分組成：導入部分和對象聲明部分. QtQuick導入中提供了用戶界面最常用的類型和功能. 類似c++的include<>

導入（import）和使用 QtQuick 模塊

要使用Qt Quick模塊，需要導入QML文檔. 導入語法如下所示：

import QtQuick 2.3

導入後就可以使用Qt Quick的功能了

定義一個簡單對象，例如一個紅色的矩形，其中的文本居中顯示，以下是代碼和運行截圖

import QtQuick 2.9
import QtQuick.Controls 2.2

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("qml學習")

    Rectangle {
        width: 200
        height: 100
        color: "red"

        Text {
            anchors.centerIn: parent
            text: "Hello, World!"
        }
    }
}

這個簡單的QML文件開始是import語句，會引入QtQuick 2.9模塊，類似c++的include語句，與java中的import語句一樣的效果。

1、ApplicationWindow{}，定義了一個應用程序的窗口，裏面有title 名字爲“qml學習”。

2、Rectangle{}語句，定義了一個rectangle的對象。

3、Text 可以說是一個rectangel的內置對象。anchors.centerIn: parent讓它居中父類顯示

4、屬性初始化了rectangle的width 和 height屬性。

 

用戶的輸入怎麼處理？

使用QML開發界面的一大優點是，它允許程序員使用簡單的JavaScript表達式定義應用程序對事件的反應. 在QML中，我們將這些事件稱爲信號 ，這些信號由信號處理程序處理 .

Rectangle {
    width: 200
    height: 100
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }

    MouseArea {
        anchors.fill: parent
        onClicked: parent.color = "blue"
    }

這個例子是每當用戶單擊窗口中的任何位置時，矩形都會從紅色變爲藍色. 請注意， MouseArea類型還會發出觸摸事件的點擊信號，因此此代碼也可以在移動設備上運行.

用戶用鍵盤輸入時，可以用一個簡單的表達式類似地處理：

Rectangle {
    width: 200
    height: 100
    color: "red"

    Text {
        anchors.centerIn: parent
        text: "Hello, World!"
    }

    focus: true
    Keys.onPressed: {
        if (event.key == Qt.Key_Return) {
            color = "blue";
            event.accepted = true;
        }
    }
}

當用戶點返回鍵時，矩形顏色會變成藍色

屬性綁定

對象及其屬性構成了QML文件中定義的圖形界面的基礎. QML語言允許屬性以各種方式彼此綁定，從而實現高度動態的用戶界面.

在以下示例中，每個子Rectangle對象均綁定到父Rectangle上面. 如果父矩形的幾何形狀發生變化，由於屬性綁定，每個子矩形的幾何形狀將自動更新.

Rectangle {
    width: 400
    height: 200

    Rectangle {
        width: parent.width / 2
        height: parent.height
    }

    Rectangle {
        width: parent.width / 2
        height: parent.height
        x: parent.width / 2
    }
}

動畫 Animations

屬性也可以通過動畫動態更新. QtQuick導入提供了各種動畫類型，可用於爲屬性值的更改制作動畫. 在下面的示例中，動畫了一個屬性，然後將其顯示在" 文本"區域中：

Rectangle {
    color: "lightgray"
    width: 200
    height: 200

    property int animatedValue: 0
    SequentialAnimation on animatedValue {
        loops: Animation.Infinite
        PropertyAnimation { to: 150; duration: 1000 }
        PropertyAnimation { to: 0; duration: 1000 }
    }

    Text {
        anchors.centerIn: parent
        text: parent.animatedValue
    }
}

顯示的值會從0到150定期變化

自定義類型

我們可以自定義一個按鈕類型，利用rectangle對象達到想要的視覺效果，並且將這個類型定義爲自定義類型。

例如，我們寫一個button.qml

// Button.qml
import QtQuick 2.3

Rectangle {
    width: 100; height: 100
    color: "red"

    MouseArea {
        anchors.fill: parent
        onClicked: console.log("Button clicked!")
    }
}

現在，可以在應用程序中多次重複使用該類型，如下所示

// application.qml
import QtQuick 2.3

Column {
    Button { width: 50; height: 50 }
    Button { x: 50; width: 100; height: 50; color: "blue" }
    Button { width: 50; height: 50; radius: 8 }
}

這樣，模塊化用戶界面類型就可以在應用程序中進行組裝和重用

 

下一章 講QML的屬性