1.初識 Qt5

本書將為大家介紹使用 Qt 5.x 版本開發(fā)應(yīng)用程序的不同方面。我們將專注于新的 Qt Quick 技術(shù)，同時提供了編寫 Qt Quick 的 C++ 后端和擴(kuò)展的一些必要信息。

本章提供了 Qt 5 的高級概述。我們將在本章展示開發(fā)人員可用的不同應(yīng)用程序模型和一個對這些特性進(jìn)行預(yù)覽的 Qt 5 示例應(yīng)用程序。此外，本章旨在全面概述 Qt 5 內(nèi)容，以及如何與 Qt 5 的制作人員取得聯(lián)系。

1.1.前言

歷史

Qt 4 自 2005 年以來一直在不斷地發(fā)展和演進(jìn)，為數(shù)千個應(yīng)用甚至完整的桌面和移動系統(tǒng)提供了堅實(shí)的基礎(chǔ)。計算機(jī)用戶近年來的使用模式發(fā)生了變化。從固定電腦到便攜式筆記本電腦和現(xiàn)在的移動終端。經(jīng)典桌面系統(tǒng)越來越多地被基于移動終端的觸屏系統(tǒng)所替代。與此同時，桌面的用戶體驗也在悄然發(fā)生著改變。在過去 Windows UI 占主導(dǎo)地位的地方，現(xiàn)在卻已被讓我們花費(fèi)更多的時間的使用另一種 UI 語言的屏幕所占據(jù)。

Qt 4 是旨在滿足桌面世界的，在所有主要平臺上提供一系列方便移植的 UI 小部件。Qt 用戶現(xiàn)在正在面臨更大的挑戰(zhàn)是為客戶提供由客戶需求驅(qū)動的基于觸摸屏的用戶界面，并在所有主要桌面和移動系統(tǒng)上實(shí)現(xiàn)現(xiàn)代用戶界面。Qt 4.7 開始引入的 Qt Quick 技術(shù)，允許用戶從簡單元素創(chuàng)建一組用戶界面組件，以實(shí)現(xiàn)由客戶需求驅(qū)動的完整新 UI。

1.1.1.聚焦 Qt 5

Qt5 基于之前非常成功的 Qt 4 發(fā)行版。到 Qt 4.8 為止，Qt 4 發(fā)行版已經(jīng)將近 7 個年頭?，F(xiàn)在到了讓一個驚艷的工具包更加驚艷的時候了。Qt 5 專注于以下內(nèi)容：

• 杰出圖形繪制技術(shù)（Outstanding Graphics）：Qt Quick 2 基于使用場景圖實(shí)現(xiàn)的 OpenGL（ES）。重新組合的圖形堆棧允許新的圖像效果與在此領(lǐng)域中從未見過的易用性結(jié)合在一起。
• 更好地提高生產(chǎn)力（Developer Productivity）：QML 和 JavaScript 是創(chuàng)建 UI 的主要手段。后端將由 C++ 驅(qū)動。JavaScript 和 C++ 之間的分割允許前端開發(fā)人員快速迭代，專注于創(chuàng)建漂亮的用戶界面，而后端 C++ 開發(fā)人員，專注于穩(wěn)定性，性能和延長運(yùn)行時間。
• 跨平臺的可移植性（Cross-platform portability）：通過統(tǒng)一的 Qt 平臺抽象技術(shù)，現(xiàn)在可以更容易和更快地將 Qt 端口擴(kuò)展到更廣泛的平臺。Qt 5 圍繞 Qt Essentials 和附加組件的概念進(jìn)行構(gòu)建，它允許 OS 開發(fā)人員將重點(diǎn)放在必需的模塊以及更少的運(yùn)行時間上。
• 開發(fā)和活躍的社區(qū)（Open Development）：Qt 現(xiàn)在是一個真正的開放式治理的項目 Qt-Project。它的發(fā)展是開放和社區(qū)驅(qū)動的。

1.2. Qt 5 介紹

1.2.1. Qt Quick

Qt Quick 是 Qt 5 中使用的用戶界面技術(shù)的總稱。Qt Quick 本身是幾種技術(shù)的集合：

• QML - 用戶界面的標(biāo)記語言
• JavaScript - 動態(tài)腳本語言
• Qt C++ - 高度可移植的增強(qiáng)型 C++ 庫

Qt 5 概述

與 HTML 類似，QML 也是標(biāo)記語言。它由包含在大括號中的 Qt Quick 中稱為元素的標(biāo)簽組成。QML 是全新設(shè)計的，用于為開發(fā)人員提供速度更快，閱讀更容易的創(chuàng)建用戶界面的語言。在 QML 中我們可以使用 JavaScript 代碼來增強(qiáng)用戶界面的體驗。通過在 Qt Quick 使用 Qt C++ 可以輕松擴(kuò)展我們的本地功能。簡而言之，聲明式 UI 稱為前端，本地部分稱為后端。這樣做的好處是我們可以將應(yīng)用程序的密集運(yùn)算及本地操作部分與用戶界面部分分離。

在典型的項目中前端開發(fā)使用 QML/JaveScript，后端代碼開發(fā)使用 Qt C++ 來完成系統(tǒng)接口和繁重的計算工作。這更大限度地將面向設(shè)計的開發(fā)人員和功能開發(fā)人員之間的工作分開開展。通常后端是使用 Qt 自己的單元測試框架進(jìn)行測試，并為前端開發(fā)人員導(dǎo)出要使用的接口。

1.2.2.一個用戶界面示例

讓我們用 Qt Quick 創(chuàng)建一個簡單的用戶界面，它用于展示 QML 語言的一些特性。在這個示例中我們將實(shí)現(xiàn)一個帶旋轉(zhuǎn)葉片動畫的風(fēng)車。

示例效果

我們從一個名為 main.qml 的空文件開始。所有的 QML 文件都用 .qml 結(jié)尾。作為標(biāo)記語言（如HTML），QML 文檔需要有一個唯一的根元素，在我們的例子中是基于背景圖像的寬度和高度的 Image 元素：

import QtQuick 2.3

Image {
    id: root
    source: "images/background.png"
}

由于 QML 沒有限制任何元素類型作為根元素，因此我們用將通過設(shè)置 source 屬性來顯示圖像作為背景圖的 Image 元素作為根元素。

背景圖片

提示：
每個元素都有屬性，例如一個圖像具有寬度，高度，還有其他屬性，如 source 屬性。像上面的代碼中展示的那樣，Image 元素的寬高如果不進(jìn)行顯示地設(shè)置為有效的像素的話，它會自動被設(shè)置為源圖像的大小。

最標(biāo)準(zhǔn)的 QML 元素位于我們在第一行中使用 import 語句引入的 QtQuick 模塊中。

id 特殊屬性是可選的，它將包含稍后在文檔中，可以作為從其他位置引用此元素對象的標(biāo)識符。重要提示：id 屬性設(shè)置完成后無法更改，并且在運(yùn)行時無法設(shè)置。使用 root 作為根元素的 id 只是作者的一種習(xí)慣，可以在比較大的 QML 文檔中方便地引用最頂層元素。

我們的示例中的界面的前景元素風(fēng)車手柄和風(fēng)車輪被放置作為單獨(dú)的圖像。

風(fēng)車手柄

風(fēng)車車輪

手柄放置在背景的水平中心底部。并且風(fēng)車車輪可以放置在背景的中心。

通常，我們的用戶界面將由許多不同的元素類型組成，而不是像本示例中這樣僅僅有圖像元素。

Image {
    id: root
    ...
    Image {
        id: pole
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.bottom: parent.bottom
        source: "images/pole.png"
    }

    Image {
        id: wheel
        anchors.centerIn: parent
        source: "images/pinwheel.png"
    }
    ...
}

要將車輪放置在中央位置，我們使用一個稱為錨點(diǎn)（anchors）的屬性。錨定允許我們指定父對象和子對象之間的幾何關(guān)系。例如：將當(dāng)前元素放在另一個元素的中心（anchors.centerIn: parent）。我們用左邊（left），右邊（right），頂部（top），底部（bottom），中央（centerIn），填充（fill），垂直居中（verticalCenter）和水平居中（horizontalCenter）來表示元素之間的關(guān)系。當(dāng)然，他們是需要匹配使用的，如果把當(dāng)前元素的左側(cè)錨定到一個元素的頂端是沒有任何意義的。

至此，我們已經(jīng)把風(fēng)車車輪設(shè)置在父元素的中心位置。

提示：
有時我們需要對錨定的中心點(diǎn)進(jìn)行一些微小的調(diào)整。使用 anchors.horizontalCenterOffset 或者 anchors.verticalCenterOffset 可以幫助我們輕松地實(shí)現(xiàn)這個功能。類似的調(diào)整屬性也可以用于其他所有的錨。通過查閱 Qt 的幫助文檔我們可以知道完整的錨屬性列表。

提示：
將一個圖像作為根矩形元素的子元素放置展示了聲明式語言的重要特性。我們以層和分組的順序描述了用戶界面，最頂部的一層元素（根矩形框）先繪制，在包含元素的局部坐標(biāo)系中子層元素被繪制在頂層元素的上面。

為了讓我們的展示更加有趣一點(diǎn)，我們應(yīng)該讓程序有一些交互功能。策略是，當(dāng)用戶點(diǎn)擊程序的某個位置時，使風(fēng)車的車輪轉(zhuǎn)動起來。

為了實(shí)現(xiàn)監(jiān)測用戶點(diǎn)擊功能，我們加入 MouseArea 元素，并使其大小與根元素一樣大。

Image {
    id: root
    ...
    MouseArea {
        anchors.fill: parent
        onClicked: wheel.rotation += 90
    }
    ...
}

當(dāng)用戶在其覆蓋區(qū)域內(nèi)點(diǎn)擊時，鼠標(biāo)區(qū)域發(fā)出信號。我們可以通過重新 onClicked 接口來監(jiān)聽這個信號。上面的代碼中，我們引用風(fēng)車的車輪圖像的 id 來引用它并將其旋轉(zhuǎn)+90度。

提示：
on + SignalName 的命名方式對于每個信號都是有效的。另外當(dāng)屬性的值發(fā)生改變時也會發(fā)出一個信號。此時的命名方式是：on + PropertyName + Chagned。 例如：當(dāng)寬度（width）屬性改變時，我們可以使用 onWidthChanged:print(width) 來監(jiān)控并得到這個新的寬度值。

現(xiàn)在風(fēng)車輪子會旋轉(zhuǎn)了，但是效果仍然不那么流暢。旋轉(zhuǎn)屬性被直接更改了。效果幾乎是一閃而過。我們更希望這個旋轉(zhuǎn)效果是動態(tài)實(shí)現(xiàn)的。動畫定義了在一段時間內(nèi)如何分配屬性更改。為了實(shí)現(xiàn)這一點(diǎn)，我們使用一個名為 property behavior 的動畫類型。對于應(yīng)用于該屬性的每個更改，“行為”將為屬性運(yùn)行指定的動畫。簡而言之，每次該屬性更改時，都會運(yùn)行動畫。這只是在 QML 中聲明動畫的幾種方式之一。

Image {
    id: root
    Image {
        id: wheel
        Behavior on rotation {
            NumberAnimation {
                duration: 250
            }
        }
    }
}

現(xiàn)在無論何時風(fēng)車車輪的旋轉(zhuǎn)屬性改變后，將使用持續(xù)時間為 250 ms 的 NumberAnimation 動畫組件進(jìn)行動畫處理。所以每次 90 度旋轉(zhuǎn)都需要經(jīng)過 250 毫秒。

運(yùn)行效果

提示：
我們實(shí)際上不會看到上圖中的風(fēng)車車輪的模糊效果。這幅圖只是為了表明車輪正在旋轉(zhuǎn)。但是一個模糊的輪子在資源文件夾中。也許我們會想嘗試使用它。

現(xiàn)在風(fēng)車的輪子看起來已經(jīng)好多了，以上這些，就是關(guān)于Qt Quick 程序設(shè)計是如何工作的一個大概的簡介了。

1.3. Qt 的組成模塊

Qt 5 由大量模塊組成。一個模塊一般就是供開發(fā)人員使用的一個庫。某些模塊對于啟用 Qt 的平臺是必須的。它們形成一個名為 Qt Essentials Modules 的集合。許多模塊是可選的，它們形成了 Qt 的附加模塊。預(yù)計大多數(shù)開發(fā)人員不需要使用它們，但是了解他們是很有價值的，因為它們?yōu)槲覀兛赡苡龅降某Ｒ妴栴}提供了寶貴的解決方案。

1.3.1. Qt 模塊

Qt Essentials 模塊對于啟用 Qt 平臺是必須的。它們?yōu)槭褂?Qt Quick 2 開發(fā)現(xiàn)代 Qt 5 應(yīng)用程序提供了基礎(chǔ)。

Core-Essential（核心基礎(chǔ)）模塊。

下表是啟動 QML 編程開發(fā)的最小 Qt 5 模塊。

核心基礎(chǔ)模塊依賴關(guān)系

1.3.2. Qt 附件模塊

除了必要的模塊，Qt 還為軟件開發(fā)人員提供了額外的模塊，這些模塊不一定是發(fā)行版的一部分。 以下是可用的附加模塊的簡短列表。

提示：
由于這些模塊不一定是發(fā)行版的一部分，所以模塊之間的狀態(tài)不同，取決于貢獻(xiàn)者的數(shù)量有多少以及測試的程度。

1.4. 支持的平臺

Qt 支持各種平臺。Qt 支持所有主流的桌面和嵌入式平臺。通過 Qt 應(yīng)用抽象（Qt Application Abstraction）技術(shù)，如果需要，現(xiàn)在可以更容易將 Qt 應(yīng)用到我們自己的平臺。

在一個平臺上測試 Qt 5 是非常耗時的。qt 項目選擇了一組平臺，構(gòu)建了參考平臺。這些平臺通過系統(tǒng)測試進(jìn)行徹底測試，以確保最佳質(zhì)量。但是注意：沒有任何代碼是沒有錯誤的。

Qt 項目

來看下qt-project wiki：
“Qt 項目（Qt-Project）是一個對 Qt 有興趣的基于共識的精英團(tuán)體，任何有興趣的人都可以加入社區(qū)，參與決策過程，并為Qt的發(fā)展作出貢獻(xiàn)。”

Qt-Project 是一個為 Qt 未來開發(fā)開源部分的組織。它基于使用者的貢獻(xiàn)。最大的貢獻(xiàn)者是 DIGIA，它也可以提供 Qt 的商業(yè)授權(quán)。

對于公司而言 Qt 有一個開源的許可和一個商業(yè)許可。商業(yè)許可適用于那些不能或不會遵守開源許可證的公司。沒有獲得商業(yè)許可，這些公司將無法使用 Qt，并且允許 DIGIA 不向 Qt 項目貢獻(xiàn)這部分需要商業(yè)許可的代碼。

在全球有很多公司，他們在不同的平臺上使用 Qt 開發(fā)產(chǎn)品，提供咨詢。同樣也有很多開源項目和開源開發(fā)者，它們使用 Qt 作為它們的開發(fā)庫。與這個令人敬畏的工具庫一起工作并且成為這個充滿活力的社區(qū)的一部分令人愉悅的事。它能讓你成為一個更好的人嗎？ 為什么不會呢？：-）

開啟社區(qū)貢獻(xiàn)之旅吧！

本文參考鏈接：Meet Qt 5