為Ubuntu Touch [QML]創建應用-[第1部分]

介紹

接下來將推出一系列帖子（就像我做的那些 瓦拉），但這次是申請 Ubuntu Touch，原則上的應用與中的“相同” 發帖人 瓦拉，即一種遊戲，我們以測試的形式有一個問題和 4 個答案，然後我們有三個按鈕，一個用於消除兩個可能的答案（50%），另一個用於凍結時間，最後一個用於跳過問題。

要了解如何開始創建項目，您可以訪問此 發表 （文檔、創建項目...），因為我們將從已創建的項目開始。

基礎知識

為了創建應用程序，我們將使用以下組件 Ubuntu儘管我們可以創建自己的組件，但在本例中我們不會。

Ubuntu 組件是我們將用於我們的應用程序的組件：

要使用它們，我們仍然需要導入模塊：

導入 Ubuntu.Component 0.1

我們可以在組件中找到不同的元素，例如按鈕、進度條等。 我們可以下載一個項目，其中向我們展示了大部分組件：

巴茲爾分行 lp:ubuntu-ui-工具包 

設計應用

我們從製作應用程序的圖像開始 GTK，在這種情況下我們將使用 質量管理語言，事實上我們將創建整個應用程序 Qt快速 (質量管理語言 + JavaScript的).

該應用程序與圖像一樣，由問題、時間、答案、選項和分數組成。 唯一的區別（除了“樣式”）是上面我們將有選項卡。

為此，我們將使用按鈕、標籤和進度條元素。 對於結構，我們將使用 Element 柱 y 排。

設計主屏幕佈局：

我們從 MainView 開始，其中會找到不同的選項卡，在這種情況下，我們將處理應用程序初始屏幕的佈局。

MainView { objectName: "mainView" //... }

方面 （適用於 UbuntuTouch):

寬度：units.gu(50) 高度：units.gu(75)

我們定義應用程序的長度和寬度，其中寬度為 50（單位），長度為 75，現在我們要給它顏色：

頁眉顏色：“#57365E”背景顏色：“#A55263”頁腳顏色：“#D75669”

我們有頁眉、正文和頁腳的顏色：

正如我之前提到的，應用程序將由選項卡構建：

    Tabs { id: tabs Game { objectName: "jocTab" } /* 添加 { objectName: "addQuestions" } */ }

正如我們所看到的，我們有兩個選項卡，一個是評論的（我們還沒有創建它），另一個是玩的（我們現在將創建它）。 要創建所述選項卡，我們將創建一個新的 qml 文件（添加新 -> Qt -> QML 文件 -> ...），所述文件的名稱將為 遊戲.qml.

好吧，讓我們修改 Game.qml，將其變成一個 Tab，裡面有一個 Page：

導入 QtQuick 2.0 導入 Ubuntu.Components 0.1 Tab { title: i18n.tr("Game") Page { } }

在頁面中，我們將開始構建設計中提到的元素。 一列將包含裡面的所有元素（它將垂直放置它們），然後我們將按順序放置元素：Label、ProgressBar、4 個按鈕； 為了放置選項，我們將使用 Row 元素將它們水平放置。

Column {anchors.top：pageGame.topanchors.topMargin：50間距：15寬度：parent.width高度：parent.height - 50標籤{id：問題anchors.topMargin：500文本：“問題？” anchors.horizo​​ntalCenter:parent.horizo​​ntalCenter fontSize:"large"font.bold:true}ProgressBar{id:時間anchors.horizo​​ntalCenter:parent.horizo​​ntalCenter}按鈕{id:resp1文本:"響應1"anchors.horizo​​ntalCenter:parent.horizo​​ntalCenter}按鈕{id:resp2文本:"響應2"anchors.horizo​​ntalCenter:parent.horizo​​ntalCenter}按鈕{ id：resp3文本：“響應3”anchors.horizo​​ntalCenter：parent.horizo​​ntalCenter}按鈕{id：resp4文本：“響應4”anchors.horizo​​ntalCenter：parent.horizo​​ntalCenter}行{間距：15anchors.horizo​​ntalCenter：parent.horizo​​ntalCenter按鈕{id：b50文本：“50％”}按鈕{id：bCon文本：“凍結”}按鈕{ id: bNext 文本: "下一個" } } 行 { 間距: 15anchors.horizo​​ntalCenter: Parent.horizo​​ntalCenter 標籤 { id: 未命中文本: "未命中: 0" 顏色: "紅色" } 標籤 { id: 命中文本: "點擊: 0" } 標籤 { id: 點文本: "點: 0" fontSize: "中" } }

讓我們看看在由 { } 分隔的每個元素中我們如何具有不同的屬性，在標籤和按鈕的情況下，我們可以看到“text”屬性是它顯示的文本，一個非可視且重要的屬性是“id”標識符，這將在我們實現應用程序邏輯時幫助我們。

最後我們可以看到結果：