Ubuntu Touch [QML]用のアプリの作成-[パート1]

はじめに

ここに一連の投稿があります（私がしたもののように Vala）、しかし今回は Ubuntuのタッチ、アプリケーションは最初はと「同じ」です からの投稿 Valaつまり、テストの形で質問と4つの回答があり、50つのボタンがあります。XNUMXつは可能な回答のXNUMXつ（XNUMX％）を削除し、もうXNUMXつは時間をフリーズし、最後は質問から行きます。

プロジェクトの作成を開始する方法を確認するには、こちらにアクセスしてください 役職 （ドキュメント、プロジェクトの作成...）、すでに作成されたプロジェクトから開始するため。

基本知識

アプリを作成するには、のコンポーネントを使用します Ubuntu独自のコンポーネントを作成することはできますが、この場合は作成しません。

Ubuntuコンポーネントは、アプリに使用するコンポーネントです。

それらを同じように使用するには、モジュールをインポートする必要があります。

Ubuntu.Components0.1をインポートします

ボタン、プログレスバーなど、コンポーネント内のさまざまな要素を見つけることができます。 これらのコンポーネントのほとんどを表示するプロジェクトをダウンロードできます。

bzrブランチ lp：ubuntu-ui-toolkit 

アプリの設計

アプリケーションを作成した画像から始めます GTK、この場合は使用します QML、実際には、アプリケーション全体を次のように作成します Qtクイック (QML + JavaScriptを).

アプリケーションは、画像のように、質問、時間、回答、オプション、およびポイントで構成されます。 （「スタイル」を除いて）唯一の違いは、上記にタブがあることです。

このために、button、label、progressBar要素を使用します。 構造には要素を使用します コラム y 行。

メイン画面のレイアウトの設計：

さまざまなタブが表示されるMainViewから始めます。この場合、アプリの初期画面のレイアウトで作業します。

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

寸法（UbuntuTouch用):

幅：units.gu（50）高さ：units.gu（75）

アプリケーションの長さと幅を定義します。幅は50（単位）、長さは75になります。次に、色を付けます。

headerColor： "＃57365E" backgroundColor： "＃A55263" footerColor： "＃D75669"

ヘッダー、本文、フッターの色があります。

前に述べたように、アプリケーションはタブで構成されます。

    Tabs {id：tabs Set {objectName： "jocTab"} / * Add {objectName： "addQuestions"} * /}

ご覧のとおり、XNUMXつのタブがあります。XNUMXつはコメント（まだ作成していません）、もうXNUMXつは再生します（これから作成します）。 上記のタブを作成するには、新しいqmlファイルを作成します（[新規追加]-> [Qt]-> [QMLファイル]->…）。ファイルの名前は次のようになります。 Game.qml.

さて、Game.qmlを、内部にページ（ページ）があるタブに変換するように変更しましょう。

import QtQuick 2.0 import Ubuntu.Components 0.1 Tab {title：i18n.tr（ "Game"）Page {}}

ページ内で、デザインで言及する要素の構造化を開始します。 内部にすべての要素が含まれる列（垂直に配置されます）、次に要素を順番に配置します：Label、ProgressBar、4つのボタン。 オプションを配置するには、Row要素を使用してオプションを水平に配置します。

列{anchors.top：Gamepage.topアンカー.topMargin：50間隔：15幅：parent.width高さ：parent.height-50ラベル{id：質問anchors.topMargin：500テキスト： "質問？" archives.horizo​​ntalCenter：parent.horizo​​ntalCenter fontSize： "large" font.bold：true} ProgressBar {id：時間anchors.horizo​​ntalCenter：parent.horizo​​ntalCenter}ボタン{id：resp1 text： "Response 1" archives.horizo​​ntalCenter：parent.horizo​​ntalCenter}ボタン{id：resp2 text： "Response 2" archives.horizo​​ntalCenter：parent.horizo​​ntalCenter}ボタン{id：resp3 text： "Response 3" archives.horizo​​ntalCenter：parent.horizo​​ntalCenter}ボタン{id：resp4 text： "Response 4"アンカー.horizo​​ntalCenter：parent.horizo​​ntalCenter}行{間隔：15アンカー.horizo​​ntalCenter：parent.horizo​​ntalCenterボタン{id：b50テキスト： "50％"}ボタン{id：bConテキスト： "フリーズ"}ボタン{id：b次のテキスト： "次の "}}行{間隔：15アンカー.horizo​​ntalCenter：parent.horizo​​ntalCenterラベル{id：失敗テキスト："失敗：0 "色："赤 "}ラベル{id：ヒットテキスト："ヒット：0 "}ラベル{id ：ポイントテキスト： "ポイント：0" fontSize： "中"}}

{}で区切られた各要素内で、さまざまなプロパティがどのようにあるかを見てみましょう。ラベルとボタンの場合、「text」プロパティは表示されるテキストであり、重要な非視覚的プロパティは識別子「id」。これは、アプリケーションロジックを実装するときに役立ちます。

最後に、結果を確認できます。