1.初識(shí) Qt5

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

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

1.1.前言

歷史

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

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

1.1.1.聚焦 Qt 5

Qt5 基于之前非常成功的 Qt 4 發(fā)行版。到 Qt 4.8 為止，Qt 4 發(fā)行版已經(jīng)將近 7 個(gè)年頭。現(xiàn)在到了讓一個(gè)驚艷的工具包更加驚艷的時(shí)候了。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ū)動(dòng)。JavaScript 和 C++ 之間的分割允許前端開發(fā)人員快速迭代，專注于創(chuàng)建漂亮的用戶界面，而后端 C++ 開發(fā)人員，專注于穩(wěn)定性，性能和延長運(yùn)行時(shí)間。
• 跨平臺(tái)的可移植性（Cross-platform portability）：通過統(tǒng)一的 Qt 平臺(tái)抽象技術(shù)，現(xiàn)在可以更容易和更快地將 Qt 端口擴(kuò)展到更廣泛的平臺(tái)。Qt 5 圍繞 Qt Essentials 和附加組件的概念進(jìn)行構(gòu)建，它允許 OS 開發(fā)人員將重點(diǎn)放在必需的模塊以及更少的運(yùn)行時(shí)間上。
• 開發(fā)和活躍的社區(qū)（Open Development）：Qt 現(xiàn)在是一個(gè)真正的開放式治理的項(xiàng)目 Qt-Project。它的發(fā)展是開放和社區(qū)驅(qū)動(dòng)的。

1.2. Qt 5 介紹

1.2.1. Qt Quick

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

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

Qt 5 概述

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

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

1.2.2.一個(gè)用戶界面示例

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

示例效果

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

import QtQuick 2.3

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

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

背景圖片

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

最標(biāo)準(zhǔn)的 QML 元素位于我們?cè)诘谝恍兄惺褂?import 語句引入的 QtQuick 模塊中。

id 特殊屬性是可選的，它將包含稍后在文檔中，可以作為從其他位置引用此元素對(duì)象的標(biāo)識(shí)符。重要提示：id 屬性設(shè)置完成后無法更改，并且在運(yùn)行時(shí)無法設(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"
    }
    ...
}

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

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

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

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

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

為了實(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)擊時(shí)，鼠標(biāo)區(qū)域發(fā)出信號(hào)。我們可以通過重新 onClicked 接口來監(jiān)聽這個(gè)信號(hào)。上面的代碼中，我們引用風(fēng)車的車輪圖像的 id 來引用它并將其旋轉(zhuǎn)+90度。

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

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

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

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

運(yùn)行效果

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

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

1.3. Qt 的組成模塊

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

1.3.1. Qt 模塊

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

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

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

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

1.3.2. Qt 附件模塊

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

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

1.4. 支持的平臺(tái)

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

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

Qt 項(xiàng)目

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

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

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

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

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

本文參考鏈接：Meet Qt 5