Android教程網 >> Android技術 >> 關於Android編程 >> Qt on Android: Qt Quick 簡單教程

Qt on Android: Qt Quick 簡單教程

編輯：關於Android編程

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

首先看一下《Qt on Android: 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 。好吧，你可能覺得有點驢頭不對馬嘴，沒關系，有這麼點兒意思就成。<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD48aDI+UmVjdGFuZ2xlPC9oMj48cD4gICAgbWFpbi5xbWwgtcS12sj90NC0+sLro6y2qNLlwcvSu7j2IFJlY3RhbmdsZSDA4NDNtcS21M/z1/fOqiBRTUwgzsS1tbXEuPm21M/zoaO52NPattTP89TaIHFtbCDOxLz+1tC1xMPoyvajrKG2UXQgb24gQW5kcm9pZKO6UU1MINPv0dS7+bShobfSu87E1tDS0b6tvbK94qOs1eLA77K71NnXuMr2oaPPwsPm1NvDx7+0v7QgUmVjdGFuZ2xlILW9tdfKx8qyw7ShozwvcD48cD4gICAgUmVjdGFuZ2xlINPDwLS75tbG0ru49szus+S+2NDOo6y/ydLUtPix37/yo6zSsr/J0tSyu7T4o6y/ydLUyrnTw7S/yavM7rPko6zSsr/J0tTKudPDvaWx5MmrzO6z5KOsyfXWwbu5v8nS1LK7zO6z5Lb41rvM4bmpsd+/8qGtoa08L3A+PHA+ICAgIFJlY3RhbmdsZSDT0LrctuDK9NDUoaM8L3A+PHA+ICAgIHdpZHRoINPDwLTWuLaov+2jrCBoZWlnaHQg08PAtNa4tqi436OsztLDx9LRvq28+8q2uf3By6GjIDwvcD48cD4gICAgY29sb3IgyvTQ1L/J0tTWuLaozO6z5NHVyaujrLb4IGdyYWRpZW50IMr00NTU8tPDwLTJ6NbDvaWx5MmruanM7rPkyrnTw6OsyOe5+8TjzazKsda4tqjByyBjb2xvciC6zSBncmFkaWVudCCjrMTHw7QgZ3JhZGllbnQgyfrQp6O7yOe5+8TjyejWwyBjb2xvciDK9NDUzqogdHJhbnNwYXJlbnQgo6zEx8O0vs2/ydLUtO+1vda7u+bWxrHfv/Kyu8zus+S1xNCnufuhozwvcD48cD4gICAgYm9yZGVyLndpZHRoINa4tqix37/ytcS/7bbIo6wgYm9yZGVyLmNvbG9yINa4tqix37/y0dXJq6GjPC9wPjxwPiAgICBSZWN0YW5nbGUgu7m/ydLUu+bWxtSyvce+2NDOo6zE49a70qrJ6NbDIHJhZGl1cyDK9NDUvs3Q0MHLoaM8L3A+PHA+ICAgIM/Cw+bO0sPHwLS/tNK7uPa88rWltcTKvsD9o7o8L3A+PHA+PC9wPjxwcmUgY2xhc3M9"brush:java;">Rectangle { width: 320; height: 480; color: "blue"; border.color: "#808080"; border.width: 2; radius: 12; }

你可以修改 HelloQtQuickApp 的 main.qml 文件來查看效果，也可以建立一個新的工程。

上面的 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 應用的界面布局，不過這種采用絕對坐標的方式來布局，不太容易適應多種多樣的移動設備分辨率。而如果你看了《》，可能會注意到示例代碼中多次出現的 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 Text";
        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

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

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

先看一個簡單的示例，點擊按鈕，退出應用。代碼如下：

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 屬性指定按鈕文字，見過了。

checkable 屬性設置 Button 是否可選。如果 Button 可選 checked 屬性則保存 Button 選中狀態。其實我一直沒用過這個屬性……

iconName 屬性指定圖標的名字，如果平台的圖標主題中存在該名字對應的資源， Button 就可以加載並顯示它。iconSource 則通過 URL 的方式來指定 icon 的位置。iconName 屬性的優先級高於 iconSource 。

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

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

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

action 屬性，允許設定按鈕的 action ，action 可以定義按鈕的 checked ， text ，tooltip 等屬性。默認是 null 。

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

style 屬性用來定制按鈕的風格，與它配套的有一個 ButtonStyle 類，允許你定制按鈕的背景。

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

ButtonStyle

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

ButtonStyle 類有 background 、 control 、 label 三個屬性。我們通過重寫 background 來定制一個按鈕。 control 屬性指向應用 ButtonStyle 的按鈕對象，你可以用它訪問按鈕的各種狀態。 label 屬性代表按鈕的文本，如果你看它不順眼，也可以替換它。

background 實際是一個 Component 對象， Component（組件）的概念我們回頭講。這裡我們簡單的使用 Rectangle 來定制按鈕的背景。看下面的示例：

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 對象來定義按鈕背景。我定義了背景的建議寬度和高度，根據按鈕的 pressed 屬性（ control 是實際按鈕的引用）來設置背景矩形的邊框粗細，而邊框顏色則隨著按鈕的 hovered 和 pressed 屬性來變化。

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

對於 ButtonStyle ，如果有多個按鈕同時用到，上面的方式就有點繁瑣了，可以像下面這樣使用：

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() 信號。之前在《Qt on Android：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 繼承來的屬性，可以直接使用。

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

回顧一下前幾篇：

Qt on Android：Qt Quick 簡介Qt on Android：QML 語言基礎Qt on Android: Qt Quick 之 Hello World 圖文詳解如果你有耐心看到這裡，我想你肯定可以根據已經介紹的內容來完成一些比較復雜的 Qt Quick 應用了。恭喜你！

上一頁:android開發源碼分析--多個activity調用多個jni庫的方法
下一頁:Android http超時選項的測試

關於Android編程

Android編程入門 Android技術基礎 Android資訊關於Android編程 Android開發 Android開發環境 Android開發實例

相關文章