Qt（發(fā)音為“ cute”，而不是“ cu-tee”）是一個(gè)跨平臺(tái)框架，通常用作圖形工具包，它不僅創(chuàng)建CLI應(yīng)用程序中也非常有用。而且它也可以在三種主要的臺(tái)式機(jī)操作系統(tǒng)以及移動(dòng)操作系統(tǒng)（如Symbian，Nokia Belle，Meego Harmattan，MeeGo或BB10）以及嵌入式設(shè)備，Android（Necessitas）和iOS的端口上運(yùn)行。現(xiàn)在我們?yōu)槟闾峁┝嗣赓M(fèi)的試用版。趕快點(diǎn)擊下載Qt最新試用版吧>>

點(diǎn)擊獲取更多文章教程

桌面系統(tǒng)用戶界面示例

本示例以一種簡(jiǎn)單的方式展示了應(yīng)用程序管理器API，它是具有服務(wù)器端窗口裝飾的經(jīng)典桌面。該示例更多地關(guān)注概念，而不關(guān)注優(yōu)雅或完整性。例如，沒有錯(cuò)誤檢查完成。此最小桌面系統(tǒng)中的某些功能僅打印調(diào)試消息。

支持以下功能：

• 通過(guò)單擊左上方的圖標(biāo)來(lái)啟動(dòng)應(yīng)用程序
• 通過(guò)再次單擊左上方的圖標(biāo)來(lái)停止應(yīng)用程序
• 通過(guò)單擊左上方的窗口裝飾矩形關(guān)閉應(yīng)用程序窗口
• 通過(guò)單擊裝飾使應(yīng)用程序前進(jìn)
• 通過(guò)按下窗戶裝飾并移動(dòng)窗戶來(lái)拖動(dòng)窗戶
• 應(yīng)用啟動(dòng)時(shí)，系統(tǒng)用戶界面發(fā)送“ propA”更改
• 系統(tǒng)界面和App2會(huì)通過(guò)調(diào)試消息對(duì)窗口屬性更改做出反應(yīng)
• 單擊停止或重新啟動(dòng)App1動(dòng)畫
• App1在停止時(shí)將旋轉(zhuǎn)角度作為窗口屬性發(fā)送到系統(tǒng)UI
• App1暫停時(shí)在系統(tǒng)UI上顯示一個(gè)彈出窗口
• App2啟動(dòng)時(shí)會(huì)使用IPC擴(kuò)展
• App2記錄啟動(dòng)它的文檔URL
• 單擊燈泡圖標(biāo)時(shí)，App2在系統(tǒng)用戶界面中觸發(fā)通知
• 顯示源自外部流程的Wayland客戶端窗口 appman

注意：此示例可以在單進(jìn)程或多進(jìn)程模式下運(yùn)行。在下面的演練中，我們使用多進(jìn)程及其相應(yīng)的術(shù)語(yǔ)。術(shù)語(yǔ)客戶和應(yīng)用 ; 服務(wù)器和系統(tǒng)UI可以互換使用。系統(tǒng)UI包括合成和通用的進(jìn)程間通信（IPC）。

要開始示例，請(qǐng)導(dǎo)航到該minidesk文件夾，然后運(yùn)行以下命令：

 -c am-config.yaml

該appman二進(jìn)制文件（可執(zhí)行文件），通常位于Qt的安裝bin文件夾中。

系統(tǒng)界面窗口

import QtQuick 2.11
import QtQuick.Window 2.11
import QtApplicationManager.SystemUI 2.0

Window {
    title: "Minidesk - QtApplicationManager Example"
    width: 1024
    height: 640
    color: "whitesmoke"

    Readme {}

    Text {
        anchors.bottom: parent.bottom
        text: (ApplicationManager.singleProcess ? "Single" : "Multi") + "-Process Mode"
    }
    ...

該QtApplicationManager.SystemUI模塊需要導(dǎo)入來(lái)訪問(wèn)應(yīng)用程序管理器的API。系統(tǒng)UI窗口具有固定的大小和“ whitesmoke”背景色。除了Window之外，root元素還可以是常規(guī)項(xiàng)目，例如Rectangle。應(yīng)用程序管理器會(huì)為您將其包裝在一個(gè)窗口中。在背景頂部，我們顯示一個(gè)Readme元素，其中包含有關(guān)可用功能的信息。左下角有一個(gè)文本指示，指示應(yīng)用程序管理器是在單進(jìn)程模式還是多進(jìn)程模式下運(yùn)行。

    // Application launcher panel
    Column {
        Repeater {
            model: ApplicationManager

            Image {
                source: icon
                opacity: isRunning ? 0.3 : 1.0

                MouseArea {
                    anchors.fill: parent
                    onClicked: isRunning ? application.stop() : application.start("documentUrl");
                }
            }
        }
    }

中繼器提供了設(shè)置在一個(gè)應(yīng)用程序圖標(biāo)列在系統(tǒng)UI的左上角; 所述ApplicationManager元件是模型。其中，ApplicationManager提供了icon用作圖像源URL 的角色。該iconURL是在應(yīng)用程序的定義info.yaml文件。為了指示應(yīng)用程序已啟動(dòng)，通過(guò)將其綁定到isRunning角色來(lái)減少相應(yīng)應(yīng)用程序圖標(biāo)的不透明度。

單擊應(yīng)用程序圖標(biāo)可通過(guò)調(diào)用ApplicationObject.start（）啟動(dòng)相應(yīng)的應(yīng)用程序。可通過(guò)ApplicationManager模型中的application角色訪問(wèn)此功能。這兩個(gè)應(yīng)用程序均以（可選）文檔URL開頭（documentUrl）。如果應(yīng)用程序已經(jīng)在運(yùn)行，則調(diào)用ApplicationObject.stop（）。

Windows系統(tǒng)界面中的應(yīng)用程序

// System UI chrome for applications
    Repeater {
        model: ListModel { id: topLevelWindowsModel }

        delegate: Image {
            source: "chrome-bg.png"
            z: model.index

            Text {
                anchors.horizontalCenter: parent.horizontalCenter
                text: "Decoration: " + (model.window.application ? model.window.application.name("en")
                                                                 : 'External Application')
            }

            MouseArea {
                anchors.fill: parent
                drag.target: parent
                onPressed: topLevelWindowsModel.move(model.index, topLevelWindowsModel.count - 1, 1);
            }

            Rectangle {
                width: 25; height: 25
                color: "chocolate"

                MouseArea {
                    anchors.fill: parent
                    onClicked: model.window.close();
                }
            }

            WindowItem {
                anchors.fill: parent
                anchors.margins: 3
                anchors.topMargin: 25
                window: model.window

                Connections {
                    target: window
                    function onContentStateChanged() {
                        if (window.contentState === WindowObject.NoSurface)
                            topLevelWindowsModel.remove(model.index, 1);
                    }
                }
            }

            Component.onCompleted: {
                x = 300 + model.index * 50;
                y =  10 + model.index * 30;
            }
        }
    }

該模型是一個(gè)普通的ListModel ，它由WindowManager創(chuàng)建的窗口對(duì)象所提供。下面顯示了填充此ListModel的窗口角色的代碼。現(xiàn)在，讓我們集中討論此Repeater的代表包括什么：

• 大部分是透明的背景圖片。該位置取決于model.index，因此每個(gè)應(yīng)用程序窗口都有一個(gè)不同的初始位置。
• 創(chuàng)建該窗口的應(yīng)用程序的名稱，其前綴為“ Decoration”。此名稱來(lái)自在應(yīng)用程序的info.yaml文件中定義的相關(guān)ApplicationObject。
• 一個(gè)用于拖動(dòng)和抬起窗口的MouseArea。該鼠標(biāo)區(qū)域填滿整個(gè)窗口。包含應(yīng)用程序窗口的WindowItem放置在其頂部，因此將無(wú)法處理拖動(dòng)。
• 左上角的一個(gè)小的巧克力色矩形，用于關(guān)閉窗口（請(qǐng)參見WindowObject.close（））。由于我們的示例應(yīng)用程序只有一個(gè)頂級(jí)窗口，因此關(guān)閉它會(huì)導(dǎo)致相應(yīng)的應(yīng)用程序退出。
• 核心：一個(gè)WindowItem，用于WindowObject在系統(tǒng)用戶界面中呈現(xiàn)；類似于圖像文件和QML的圖像組件之間的關(guān)系。
• 最后，一旦從應(yīng)用程序（客戶端）端銷毀了窗口的窗口，則將代碼從ListModel中刪除，這是因?yàn)樗殃P(guān)閉，變?yōu)椴豢梢姞顟B(tài)，或者應(yīng)用程序本身退出或崩潰了。這些情況中的任何一種都會(huì)導(dǎo)致WindowObject失去其表面。如Animated Windows System UI Example中所示，更復(fù)雜的System UI可以使窗口消失動(dòng)畫。
  

未完待續(xù).......下一篇文章我們將發(fā)布完整版代碼！

本篇文章中的內(nèi)容你都學(xué)會(huì)了嗎？如果這篇文章沒能滿足你的需求、點(diǎn)擊獲取更多文章教程！現(xiàn)在立刻下載Qt免費(fèi)試用吧！更多Qt類開發(fā)工具QtitanRibbon、QtitanChart、QtitanNavigation、QtitanDocking、QtitanDataGrid在線訂購(gòu)現(xiàn)直降1000元，歡迎咨詢慧都獲取更多優(yōu)惠>>