Qt Quick 簡單教程

阿新 • • 發佈：2017-06-07

.com 界面布局引入主動屬性設置語句 anti 枚舉異步

上一篇《Qt Quick 之 Hello World 圖文具體解釋》我們已經分別在電腦和 Android 手機上執行了第一個 Qt Quick 演示樣例—— HelloQtQuickApp 。這篇呢，我們就來介紹 Qt Quick 編程的一些基本概念，為創建復雜的 Qt Quick 應用奠定基礎。

版權全部 foruok 。如需轉載請註明來自博客 http://blog.csdn.net/foruok 。

首先看一下《Qt Quick 之 Hello World 圖文具體解釋》中的 main.qml 文件：

技術分享

如今我們結合 main.qml 文件來解說。

import 語句

main.qml 文件第一行代碼：import QtQuick 2.0 。

這行代碼引入了 QtQuick 模塊， import 語句的作用與 C++ 中的 #include 相似。與 Java 中的 import 效果一樣。不再啰嗦了。

Qt Quick 基本元素

Qt Quick 作為 QML 的標準庫，提供了非常多基本元素和控件來幫助我們構建 Qt Quick 應用。

假設拿 C++ 來比擬， QML 就相當於 C++ 語言本身，而 Qt Quick 相當於 STL 。

好吧。你可能認為有點驢頭不正確馬嘴，沒關系，有這麽點兒意思就成。

Rectangle

main.qml 的第三行代碼，定義了一個 Rectangle 類型的對象作為 QML 文檔的根對象。

關於對象在 qml 文件裏的描寫敘述。《Qt on Android：QML 語言基礎》一文中已經解說。這裏不再贅述。以下咱們看看 Rectangle 究竟是什麽。

Rectangle 用來繪制一個填充矩形。能夠帶邊框，也能夠不帶，能夠使用純色填充。也能夠使用漸變色填充，甚至還能夠不填充而僅僅提供邊框……

Rectangle 有非常多屬性。

width 用來指定寬， height 用來指定高。我們已經見識過了。

color 屬性能夠指定填充顏色，而 gradient 屬性則用來設置漸變色供填充使用，假設你同一時候指定了 color 和 gradient 。那麽 gradient 生效；假設你設置 color 屬性為 transparent ，那麽就能夠達到僅僅繪制邊框不填充的效果。

border.width 指定邊框的寬度， border.color 指定邊框顏色。

Rectangle 還能夠繪制圓角矩形，你僅僅要設置 radius 屬性即可了。

以下我們來看一個簡單的演示樣例：

Rectangle {
    width: 320;
    height: 480;
    color: "blue";
    border.color: "#808080";
    border.width: 2;
    radius: 12;
}

你能夠改動 HelloQtQuickApp 的 main.qml 文件來查看效果，也能夠建立一個新的project。

上面的 Rectangle 對象。我們

顏色

關於顏色值， QML 中能夠使用顏色名字，如 blue / red / green / transparent 等，也能夠使用 "#RRGGBB" 或者 "#AARRGGBB" 來指定，還能夠使用 Qt.rgba() / Qt.lighter() 等等方法來構造。

詳情請參考 Qt SDK 中 "QML Basic Type: color" 頁面。

color 類型有 r 、 g 、 b 、 a 四個屬性。分別表示一個顏色值的 red 、 green 、 blue 、 alpha 四個成分。

你能夠這樣使用它們：

Text {
    color: "red"

    // prints "1 0 0 1"
    Component.onCompleted: console.log(color.r, color.g, color.b, color.a)
}

漸變色

QML 中漸變色的類型是 Gradient ，漸變色通過兩個或多個顏色值來指定。 QML 會自己主動在你指定的顏色之間插值，進行無縫填充。

Gradient 使用 GradientStop 來指定一個顏色值和它的位置（取值在 0.0 與 1.0 之間）。

好吧，無碼不歡。快快看一個演示樣例：

Rectangle {
    width: 100; 
    height: 100;
    gradient: Gradient {
        GradientStop { position: 0.0; color: "#202020"; }
        GradientStop { position: 0.33; color: "blue"; }
        GradientStop { position: 1.0; color: "#FFFFFF"; }
    }
}

Gradient 僅僅能用來創建垂直方向的漸變，只是其他方向的，能夠通過給 Rectangle 指定 rotation 屬性來實現。以下是演示樣例：

Rectangle {
    width: 100; 
    height: 100;
    rotation: 90;
    gradient: Gradient {
        GradientStop { position: 0.0; color: "#202020"; }
        GradientStop { position: 1.0; color: "#A0A0A0"; }
    }
}

剛剛我們使用了 rotation 屬性。事實上它來自 Rectangle 的父類 Item 。

Item

Item 是 Qt Quick 中全部可視元素的基類，盡管它自己什麽也不繪制，可是它定義了繪制圖元所須要的大部分通用屬性，比方 x 、 y 、 width 、 height 、錨定（ anchoring ）和按鍵處理。

Item 的屬性特別多。除了前面提到的。還有 scale / smooth / anchors / antialiasing / enabled / visible / state / states / children 等等，詳情參考 Qt 幫助文檔。

你能夠使用 Item 來分組其他的可視圖元。

如：

import QtQuick 2.0

Rectangle {
    width: 300;
    height: 200;
    Item {
        id: gradientGroup;
        Rectangle {
            x: 20;
            y: 20;
            width: 120;
            height: 120;
            gradient: Gradient {
                GradientStop { position: 0.0; color: "#202020"; }
                GradientStop { position: 1.0; color: "#A0A0A0"; }
            }
        }

        Rectangle {
            x: 160;
            y: 20;
            width: 120;
            height: 120;
            rotation: 90;
            gradient: Gradient {
                GradientStop { position: 0.0; color: "#202020"; }
                GradientStop { position: 1.0; color: "#A0A0A0"; }
            }
        }
    }

    Component.onCompleted: {
        console.log("visible children: " ,gradientGroup.visibleChildren.length);
        console.log("visible children: " ,gradientGroup.children.length);
        for(var i = 0; i < gradientGroup.children.length; i++){
            console.log("child " , i, " x = ", gradientGroup.children[i].x);
        }
    }
}

分組後能夠通過 Item 的 children 或 visibleChildren 屬性來訪問孩子元素。如上面的代碼所看到的。

另外你可能註意到了， x 、 y 、 width 、 height 四個屬性結合起來，能夠完畢 Qt Quick 應用的界面布局，只是這樣的採用絕對坐標的方式來布局，不太easy適應多種多樣的移動設備分辨率。而假設你看了《》，可能會註意到演示樣例代碼中多次出現的 anchors 屬性，它 Item 的屬性，是 Qt Quick 引入的一種新的布局方式。

使用 anchors 進行界面布局

anchors 提供了一種方式，讓你能夠通過指定一個元素與其他元素的關系來確定元素在界面中的位置。

你能夠想象一下，每一個 item 都有 7 條不可見的錨線：左（left）、水平中心（horizontalCenter）、上（top）、下（bottom）、右（right）、垂直中心（verticalCenter）、基線（baseline）。看下圖就明白了：

技術分享

在上圖中，沒有標註基線。基線是用於定位文本的，你能夠想象一行文字端坐基線的情景。

對於沒有文本的圖元，baseline 和 top 一致。

使用 anchors 布局時，除了對齊錨線。還能夠在指定上（topMargin）、下（bottomMargin）、左（leftMargin）、右（rightMargin）四個邊的留白。看個圖就明白了：

技術分享

好了，基礎知識介紹完畢。能夠看一些樣例了。

import QtQuick 2.0

Rectangle {
    width: 300;
    height: 200;

    Rectangle {
        id: rect1;
        anchors.left: parent.left;
        anchors.leftMargin: 20;
        anchors.top: parent.top;
        anchors.topMargin: 20;
        width: 120;
        height: 120;
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#202020"; }
            GradientStop { position: 1.0; color: "#A0A0A0"; }
        }
    }

    Rectangle {
        anchors.left: rect1.right;
        anchors.leftMargin: 20;
        anchors.top: rect1.top;
        width: 120;
        height: 120;
        rotation: 90;
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#202020"; }
            GradientStop { position: 1.0; color: "#A0A0A0"; }
        }
    }
}

上面的代碼執行後與之前使用 Item 分組的演示樣例代碼（絕對坐標布局）效果一樣。這裏的第二個矩形的左邊從第一個矩形的右邊開始、頂部向第一個矩形的頂部對齊。

而對第一個矩形的引用，是通過的 id 屬性來完畢的，請參看《Qt on Android：QML 語言基礎》。

Item 的 anchors 屬性，除了上面介紹的，另一些，如 centerIn 表示將一個 item 居中放置到另一個 item 內。 fill 表示充滿某個 item ……很多其他請參考 Item 類的文檔。這裏再舉個使用 centerIn 和 fill 的演示樣例：

import QtQuick 2.0

Rectangle {
    width: 300;
    height: 200;

    Rectangle {
        color: "blue";
        anchors.fill: parent;
        border.width: 6;
        border.color: "#888888";

        Rectangle {
            anchors.centerIn: parent;
            width: 120;
            height: 120;
            radius: 8;
            border.width: 2;
            border.color: "black";
            antialiasing: true;
            color: "red";
        }
    }
}

Z 序與透明度

Item 除了 x 、 y 屬性。事實上另一個 z 屬性，用來指定圖元在場景中的 Z 序。

z 屬性的類型是 real 。數值越小，圖元就越墊底（遠離我們），數值越大，圖元就越靠近我們。

Item 的屬性 opacity 能夠指定一個圖元的透明度。取值在 0.0 到 1.0 之間。

結合 Z 序和透明度，有時能夠達到不錯的效果。

以下是一個簡單的演示樣例：

import QtQuick 2.0

Rectangle {
    width: 300;
    height: 200;

    Rectangle {
        x: 20;
        y: 20;
        width: 150;
        height: 100;
        color: "#606080";
        z: 0.5;
    }

    Rectangle {
        width: 100;
        height: 100;
        anchors.centerIn: parent;
        color: "#a0c080";
        z: 1;
        opacity: 0.6;
    }
}

除了視覺效果，有時我們也須要安排圖元在場景中的 Z 序。比方一個圖片瀏覽器，可能在載入圖片時要顯示一個 loading 圖標，這個圖標要顯示在圖片之上。此時就能夠設置 loading 圖元的 Z 序大於圖片元素的 Z 序。

按鍵處理

前面提到 Item 能夠處理案件，全部從 Item 繼承的元素都能夠處理按鍵，比方 Rectangle ，比方 Button 。這點我們在《Qt on Android：QML 語言基礎》一文中介紹附加屬性時已經提到。

Item 通過附加屬性 Keys 來處理按鍵。Keys 對象是 Qt Quick 提供的，專門供 Item 處理按鍵事件的對象。它定義了非常多針對特定按鍵的信號，比方 onReturnPressed ，還定義了更為普通的 onPressed 和 onReleased 信號，一般地，你能夠使用這兩個信號來處理按鍵（請對比 Qt C++ 中的 keyPressEvent 和 keyReleaseEvent 來理解）。

它們有一個名字是 event 的 KeyEvent 參數，包括了按鍵的具體信息。假設一個按鍵被處理， event.accepted 應該被設置為 true 以免它被繼續傳遞。

這裏舉一個簡單的樣例，檢測到 Escape 和 Back 鍵時退出應用，檢測到數字鍵，就通過 Text 來顯示相應的數字。代碼例如以下：

import QtQuick 2.0

Rectangle {
    width: 300;
    height: 200;
    color: "#c0c0c0";
    focus: true;
    Keys.enabled: true;
    Keys.onEscapePressed: Qt.quit();
    Keys.onBackPressed: Qt.quit();
    Keys.onPressed: {
        switch(event.key){
        case Qt.Key_0:
        case Qt.Key_1:
        case Qt.Key_2:
        case Qt.Key_3:
        case Qt.Key_4:
        case Qt.Key_5:
        case Qt.Key_6:
        case Qt.Key_7:
        case Qt.Key_8:
        case Qt.Key_9:
            keyView.text = event.key - Qt.Key_0;
            break;
        }
    }

    Text {
        id: keyView;
        font.bold: true;
        font.pixelSize: 24;
        text: qsTr("text");
        anchors.centerIn: parent;
    }
}

演示樣例中用到了 onPressed / onEscapePressed / onBackPressed 三個附加信號處理器，當中 onPressed 信號的參數是 event ，包括了按鍵信息，程序中使用 switch 語句與 Qt 對象的枚舉值比較來過濾我們關註的按鍵。

Item 還有非常多的屬性。不再一一演示使用方法。請移步 Qt 幫助進一步了解。

你肯定註意到了。上面的演示樣例使用了 Text 這個對象，接下來我們就介紹它。

Text

Text 元素能夠顯示純文本或者富文本（使用 HTML 標記修飾的文本）。它有 font / text / color / elide / textFormat / wrapMode / horizontalAlignment / verticalAlignment 等等屬性，你能夠通過這些屬性來決定 Text 元素怎樣顯示文本。

當不指定 textFormat 屬性時， Text 元素默認使用 Text.AutoText ，它會自己主動檢測文本是純文本還是富文本，假設你明白知道要顯示的是富文本，能夠顯式指定 textFormat 屬性。

以下是一個簡單演示樣例。顯示藍色的問題，在單詞分界處斷行：

import QtQuick 2.0

Rectangle {
    width: 300;
    height: 200;
    Text {
        width: 150;
        height: 100;
        wrapMode: Text.WordWrap;
        font.bold: true;
        font.pixelSize: 24;
        font.underline: true;
        text: "Hello Blue Text";
        anchors.centerIn: parent;
        color: "blue";
    }
}

以下的樣例僅僅把 "Text" 字樣以藍色顯示：

import QtQuick 2.0

Rectangle {
    width: 300;
    height: 200;
    Text {
        width: 150;
        height: 100;
        wrapMode: Text.WordWrap;
        font.bold: true;
        font.pixelSize: 24;
        font.underline: true;
        text: "Hello Blue <font color=\"blue\">Text</font>";
        anchors.centerIn: parent;
    }
}

Text 元素的 style 屬性提供了幾種文字風格，Text.Outline 、 Text.Raised 、 Text.Sunken ，能夠使文字有點兒特別的效果。而 styleColor 屬性能夠和 style 配合使用（假設沒有指定 style ，則 styleColor 不生效），比方 style 為 Text.Outline 時，styleColor 就是文字輪廓的顏色。

看個簡單的演示樣例：

import QtQuick 2.0

Rectangle {
    width: 300;
    height: 200;
    Text {
        id: normal;
        anchors.left: parent.left;
        anchors.leftMargin: 20;
        anchors.top: parent.top;
        anchors.topMargin: 20;
        font.pointSize: 24;
        text: "Normal Text";
    }
    Text {
        id: raised;
        anchors.left: normal.left;
        anchors.top: normal.bottom;
        anchors.topMargin: 4;
        font.pointSize: 24;
        text: "Raised Text";
        style: Text.Raised;
        styleColor: "#AAAAAA" ;
    }
    Text {
        id: outline;
        anchors.left: normal.left;
        anchors.top: raised.bottom;
        anchors.topMargin: 4;
        font.pointSize: 24;
        text: "Outline Text";
        style: Text.Outline;
        styleColor: "red";
    }
    Text {
        anchors.left: normal.left;
        anchors.top: outline.bottom;
        anchors.topMargin: 4;
        font.pointSize: 24;
        text: "Sunken Text";
        style: Text.Sunken;
        styleColor: "#A00000";
    }
}

這個演示樣例除了用到 Text 元素，還使用 anchors 來完畢界面布局。

Text 就介紹到這裏。以下看 Button 。

Button

button可能是 GUI 應用中最經常使用的控件了。 QML 中的 Button 和 QPushButton 相似。用戶點擊button會觸發一個 clicked() 信號，在 QML 文檔中能夠為 clicked() 指定信號處理器。響應用戶操作。

要使用 Button 。須要引入 import QtQuick.Controls 1.1 。

先看一個簡單的演示樣例，點擊button，退出應用。

代碼例如以下：

import QtQuick 2.0
import QtQuick.Controls 1.1

Rectangle {
    width: 300;
    height: 200;
    Button {
        anchors.centerIn: parent;
        text: "Quit";
        onClicked: Qt.quit();
    }
}

你能夠執行它看看效果。

如今我們再來看 Button 都有哪些屬性。

text 屬性指定button文字，見過了。

checkable 屬性設置 Button 是否可選。

假設 Button 可選 checked 屬性則保存 Button 選中狀態。事實上我一直沒用過這個屬性……

iconName 屬性指定圖標的名字，假設平臺的圖標主題中存在該名字相應的資源， Button 就能夠載入並顯示它。iconSource 則通過 URL 的方式來指定 icon 的位置。iconName 屬性的優先級高於 iconSource 。

isDefault 屬性指定button是否為默認button。假設是默認的，用戶按 Enter 鍵就會觸發button的 clicked() 信號。

pressed 屬性保存了button的按下狀態。

menu 屬性。同意你給button設置一個菜單（此時button可能會出現一個小小的下拉箭頭），用戶點擊button時會彈出菜單。默認是 null 。

action 屬性。同意設定button的 action 。action 能夠定義button的 checked ， text 。tooltip 等屬性。

默認是 null 。

activeFocusOnPress ，指定當用戶按下button時是否獲取焦點，默認是 false 。

style 屬性用來定制button的風格，與它配套的有一個 ButtonStyle 類，同意你定制button的背景。

事實上 Button 比較簡單好用。我不準備再啰嗦下去了，咱再看下 style 的使用就結束對 Button 的介紹。

ButtonStyle

要使用 ButtonStyle 須要引入 QtQuick.Controls.Styles 1.1 。

ButtonStyle 類有 background 、 control 、 label 三個屬性。

我們通過重寫 background 來定制一個button。 control 屬性指向應用 ButtonStyle 的button對象，你能夠用它訪問button的各種狀態。 label 屬性代表button的文本，假設你看它不順眼，也能夠替換它。

background 實際是一個 Component 對象。 Component（組件）的概念我們回頭講。

這裏我們簡單的使用 Rectangle 來定制button的背景。

看以下的演示樣例：

import QtQuick 2.0
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1

Rectangle {
    width: 300;
    height: 200;
    Button {
        text: "Quit";
        anchors.centerIn: parent;
        style: ButtonStyle {
            background: Rectangle {
                implicitWidth: 70;
                implicitHeight: 25;
                border.width: control.pressed ? 2 : 1;
                border.color: (control.hovered || control.pressed) ? "green" : "#888888";
            }
        }
    }
}

我通過給 style 對象指定一個 ButtonStyle 對象來定制 Button 的風格。這個就地實現的 ButtonStyle 對象。重寫了 background 屬性。通過 Rectangle 對象來定義button背景。

我定義了背景的建議寬度和高度。依據button的 pressed 屬性（ control 是實際button的引用）來設置背景矩形的邊框粗細，而邊框顏色則隨著button的 hovered 和 pressed 屬性來變化。

終於的效果是這樣的：當鼠標懸停在button上時，邊框顏色為綠色。當鼠標按下時，邊框變粗且顏色為綠色。

對於 ButtonStyle ，假設有多個button同一時候用到，上面的方式就有點繁瑣了，能夠像以下這樣使用：

import QtQuick 2.0
import QtQuick.Controls 1.1
import QtQuick.Controls.Styles 1.1

Rectangle {
    width: 300;
    height: 200;

    Component{
        id: btnStyle;
        ButtonStyle {
            background: Rectangle {
                implicitWidth: 70;
                implicitHeight: 25;
                color: "#DDDDDD";
                border.width: control.pressed ? 2 : 1;
                border.color: (control.hovered || control.pressed) ?
 "green" : "#888888";
            }
        }
    }

    Button {
        id: openButton;
        text: "Open";
        anchors.left: parent.left;
        anchors.leftMargin: 10;
        anchors.bottom: parent.bottom;
        anchors.bottomMargin: 10;
        style: btnStyle;
    }

    Button {
        text: "Quit";
        anchors.left: openButton.right;
        anchors.leftMargin: 6;
        anchors.bottom: openButton.bottom;
        style: btnStyle;
    }
}

這次我們定義了一個組件，設置其 id 屬性的值為 btnStyle ，在 Button 中設定 style 屬性時直接使用 btnStyle 。

好啦， ButtonStyle 就介紹到這裏。以下該介紹 Image 了。

Image

Image 能夠顯示一個圖片，僅僅要是 Qt 支持的，比方 JPG 、 PNG 、 BMP 、 GIF 、 SVG 等都能夠顯示。

它僅僅能顯示靜態圖片，對於 GIF 等格式，僅僅會把第一幀顯示出來。假設你要顯示動畫，能夠使用 AnimateSprite 或者 AnimateImage 。

Image 的 width 和 height 屬性用來設定圖元的大小，假設你沒有設置它們。那麽 Image 會使用圖片本身的尺寸。假設你設置了 width 和 height ，那麽圖片就可能會拉伸來適應這個尺寸。

此時 fillMode 屬性能夠設置圖片的填充模式，它支持 Image.Stretch（拉伸）、 Image.PreserveAspectFit（等比縮放）、 Image.PreserveAspectCrop（等比縮放，最大化填充 Image ，必要時裁剪圖片）、 Image.Tile（在水平和垂直兩個方向平鋪。就像貼瓷磚那樣）、 Image.TileVertically（垂直平鋪）、 Image.TileHorizontally（水平平鋪）、 Image.Pad（保持圖片原樣不作變換）等模式。

Image 默認會堵塞式的載入圖片，假設要顯示的圖片非常小，沒什麽問題。假設分辨率非常高，麻煩就來了。

此時你能夠設置 asynchronous 屬性為 true 來開啟異步載入模式。這樣的模式下 Image 使用一個線程來載入圖片，而你能夠在界面上顯示一個等待圖標之類的小玩意兒來告訴用戶它須要等會兒。然後當 status（枚舉值）的值為 Image.Ready 時再隱藏載入等候界面。

比較強悍的是， Image 支持從網絡載入圖片。它的 source 屬性類型是 url 。能夠接受 Qt 支持的隨意一種網絡協議，比方 http 、 ftp 等。

而當 Image 識別到你提供的 source 是網絡資源時。會自己主動啟用異步載入模式。此時呢，Image 的 progress（取值範圍 0.0 至 1.0 ）。status（枚舉值）都會適時更新。你能夠依據它們推斷何時結束你的載入等候提示界面。

算，先到這兒，看看怎麽用吧。以下是最簡的演示樣例：

import QtQuick 2.0

Image {
    source: "images/yourimage.png"
}

source 替換為一個實際存在的圖片路徑就能夠看到效果。

顯示網絡圖片

以下是一個略微復雜點兒的演示樣例。顯示網絡上的圖片，在下載和載入前顯示一個轉圈圈的 Loading 圖標。圖片載入成功後隱藏 Loading 圖標。假設載入出錯，則顯示一個簡單的錯誤消息。看代碼：

import QtQuick 2.0
import QtQuick.Controls 1.1

Rectangle {
    width: 480;
    height: 320;
    color: "#121212";

    BusyIndicator {
        id: busy;
        running: true;
        anchors.centerIn: parent;
        z: 2;
    }

    Label {
        id: stateLabel;
        visible: false;
        anchors.centerIn: parent;
        z: 3;
    }

    Image {
        id: imageViewer;
        asynchronous: true;
        cache: false;
        anchors.fill: parent;
        fillMode: Image.PreserveAspectFit;
        onStatusChanged: {
            if (imageViewer.status === Image.Loading) {
                busy.running = true;
                stateLabel.visible = false;
            }
            else if(imageViewer.status === Image.Ready){
                busy.running = false;
            }
            else if(imageViewer.status === Image.Error){
                busy.running = false;
                stateLabel.visible = true;
                stateLabel.text = "ERROR";
            }
        }
    }

    Component.onCompleted: {
        imageViewer.source = "http://image.cuncunle.com/Images/EditorImages/2013/01/01/19/20130001194920468.JPG";
    }
}

圖片資源是我從網絡上搜索到的，僅僅用於演示程序，如有版權問題請提示我改動。

Image 對象，設置了 asynchronous 屬性為 true，只是對於網絡資源 Image 默認異步載入。這個屬性不起作用，僅僅有你想異步載入本地資源時才須要設置它。 cache 屬性設置為 false ，告訴 Image 不用緩存圖片。 fillMode 屬性我設置了等比縮放模式。

onStatusChanged 是信號處理器，Image 的 status 屬性變化時會發射 statusChanged() 信號。之前在《QML 語言基礎》中介紹信號處理器時我們知道。信號處理器遵循 on{Signal} 語法。所以我們這裏的名字是 onStatusChanged 。在信號處理器的代碼塊中。我通過 Image 對象的 id 訪問它的 status 屬性。依據不同的狀態來更新界面。

可能你會奇怪，在 Qt 幫助中， Image 類的參考手冊裏沒有明白提到 statusChanged 信號。事實上呢，還有非常多的信號。 Qt 的文檔裏都沒有提到，嗚嗚。怎麽辦呢？教你個訣竅，去 SDK 頭文件裏找，比方 Image 的頭文件是 Qt5.2.0\5.2.0\mingw48_32\include\QtQuick\5.2.0\QtQuick\private\qquickimage_p.h ，閱讀這個頭文件你會看到 QML 中的 Image 相應的 Qt C++ 中的 QQuickImage 類，而 QQuickImage 的父類是 QQuickImageBase ，QQuickImageBase 的類聲明在文件 Qt5.2.0\5.2.0\mingw48_32\include\QtQuick\5.2.0\QtQuick\private\qquickimagebase_p.h 中。找到這裏就找到 status 屬性的真身了，看以下的代碼：

Q_PROPERTY(Status status READ status NOTIFY statusChanged)

Q_PROPERTY 宏用來定義 QObject 及其派生類的屬性。這樣定義的屬性能夠在 QML 中訪問。上面的語句定義了僅僅讀的 status 屬性而且指明當屬性變化時發送 statusChanged 信號。噢耶，K.O. ！

如今來看執行效果圖吧（我偷了個懶。都是直接改動 HelloQtQuickApp 的 main.qml 文件來看各種演示樣例的效果）。下圖是載入過程：

技術分享

我設置了作為 QML 文檔根元素的 Rectangle 對象的填充顏色為 "#121212"，所以背景是接近黑色的。下圖是圖片載入後的效果：

技術分享

怎麽樣，還不錯吧，等比縮放模式生效了。

Qt Quick 是如此方便。以至於我不得不愛它！

你看嘛，就不到 50 行代碼就能夠實現一個基於網絡的圖片瀏覽器……

說說這個演示樣例中出現的新內容：BusyIndicator 。

BusyIndicator

BusyIndicator 用來顯示一個等待圖元，在進行一些耗時操作時你能夠使用它來緩解用戶的焦躁情緒。

BusyIndicator 的 running 屬性是個布爾值，為 true 時顯示。 style 屬性同意你定制 BusyIndicator 。默認的效果就是前面圖示的那種，一個轉圈圈的動畫。

至於 BusyIndicator 的使用，以下是顯示網絡圖片演示樣例的代碼。再溫習下：

    BusyIndicator {
        id: busy;
        running: true;
        anchors.centerIn: parent;
        z: 2;
    }

盡管 BusyIndicator 僅僅有 running 和 style 兩個屬性，但它的祖先們有非常多屬性。上面用到的 anchors 和 z ，都是從 Item 繼承來的屬性，能夠直接使用。

好嘛，總算到一階段。能夠和簡單教程說再見了。

版權全部 foruok ，如需轉載請註明來自博客 http://blog.csdn.net/foruok 。

回想一下前幾篇：

Qt Quick 簡單介紹
QML 語言基礎
Qt Quick 之 Hello World 圖文具體解釋

假設你有耐心看到這裏。我想你肯定能夠依據已經介紹的內容來完畢一些比較復雜的 Qt Quick 應用了。恭喜你！

Qt Quick 簡單教程

.com 界面布局引入主動屬性設置語句 anti 枚舉異步上一篇《Qt Quick 之 Hello World 圖文具體解釋》我們已經分別在電腦和 Android 手機上執行了第一個 Qt Quick 演示樣例—— HelloQtQuickApp 。這

Qt Quick 簡單教程

import 語句

Qt Quick 基本元素

Rectangle

顏色

漸變色

Item

使用 anchors 進行界面布局

Z 序與透明度

按鍵處理

Text

Button

ButtonStyle

Image

顯示網絡圖片

BusyIndicator

Qt Quick 簡單教程

Qt Quick 簡單介紹

Qt Quick Lession3 (用QML寫一個簡單的顏色選擇器)

Qt Quick Lession2 (QML語法從一個簡單的例子說起)

在Qt Quick中一個簡單Hello World載入過程

QML官方系列教程——Using Qt Quick Designer

Qt使用教程之使用Qt Quick UI表單（六）

OpenGL系列學習教程(零)---在Qt/Quick中使用OpenGL

Qt Quick編程(1)

fullpage.js簡單教程（一）

Qt Quick 之 QML 與 C++ 混合編程具體解釋

Qt Quick

Qt5官方demo解析集13——Qt Quick Particles Examples - Image Particles

Qt Quick之StackView具體解釋（1）

Git和Github簡單教程

Qt Quick + OpenGL + Bullet初次測試

簡單教程

webpack簡單教程(2)--使用less並生成獨立的CSS樣式

Linux搭建ftp服務器簡單教程

Git簡單教程

Qt Quick 簡單教程

import 語句

Qt Quick 基本元素

Rectangle

顏色

漸變色

Item

使用 anchors 進行界面布局

Z 序 與 透明度

按鍵處理

Text

Button

ButtonStyle

Image

顯示網絡圖片

BusyIndicator

相關推薦

Z 序與透明度