Erstellen einer App für Ubuntu Touch [QML] - [Teil 1]

Einführung

Hier kommt eine Reihe von Beiträgen (wie die, mit denen ich gemacht habe Vala), aber diesmal mit einer Bewerbung für Ubuntu-Touchist die Anwendung zunächst die "gleiche" wie in der Beiträge von ValaDas heißt, eine Art Spiel, bei dem wir eine Frage und 4 Antworten in Form eines Tests haben. Dann haben wir drei Schaltflächen, eine, um zwei der möglichen Antworten zu eliminieren (50%), eine, um die Zeit einzufrieren, und die letzte, um fortzufahren Frage.

Um zu sehen, wie Sie mit dem Erstellen eines Projekts beginnen, können Sie dies besuchen Post (Dokumentation, Projekt erstellen ...), da wir mit dem bereits erstellten Projekt beginnen.

Grundwissen

Um die App zu erstellen, verwenden wir die Komponenten von UbuntuWährend wir unsere eigenen Komponenten erstellen könnten, werden wir dies in diesem Fall nicht tun.

Ubuntu-Komponenten sind Komponenten, die wir für unsere App verwenden werden:

Um sie gleich zu verwenden, müssen wir das Modul importieren:

Ubuntu.Components 0.1 importieren

Innerhalb der Komponenten finden wir verschiedene Elemente wie Schaltflächen, Fortschrittsbalken usw. Wir können ein Projekt herunterladen, in dem sie uns die meisten dieser Komponenten zeigen:

bzr Zweig lp: ubuntu-ui-toolkit 

App gestalten

Wir beginnen mit dem Bild, mit dem wir den Antrag gestellt haben GTK, in diesem Fall werden wir verwenden QMLTatsächlich erstellen wir die gesamte Anwendung mit Qt schnell (QML + JavaScript).

Die Anwendung besteht wie das Bild aus einer Frage, einer Zeit, Antworten, Optionen und Punkten. Der einzige Unterschied (abgesehen vom "Stil") besteht darin, dass wir oben Tabs haben.

Dazu verwenden wir die Elemente button, label und progressBar. Für die Struktur verwenden wir das Element Kolonne y Reihe.

Entwerfen des Layouts des Hauptbildschirms:

Wir beginnen mit einer Hauptansicht, in der verschiedene Registerkarten zu finden sind. In diesem Fall arbeiten wir am Layout des Startbildschirms unserer App.

MainView {Objektname: "Hauptansicht" // ...}

Maße (für Ubuntu Touch):

Breite: Einheiten.gu (50) Höhe: Einheiten.gu (75)

Wir definieren die Länge und Breite unserer Anwendung, wobei die Breite 50 (Einheiten) und die Länge 75 beträgt. Jetzt geben wir ihr Farbe:

headerColor: "# 57365E" backgroundColor: "# A55263" footerColor: "# D75669"

Wir haben die Farbe der Kopf-, Körper- und Fußzeile:

Wie bereits erwähnt, wird die Anwendung nach Registerkarten strukturiert:

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

Wie wir sehen können, haben wir zwei Registerkarten, eine kommentiert (wir haben sie noch nicht erstellt) und eine andere zum Spielen (die wir jetzt erstellen werden). Um diese Registerkarte zu erstellen, erstellen wir eine neue qml-Datei (Neue hinzufügen -> Qt -> QML-Datei ->…). Der Name der Datei lautet Game.qml.

Nun, ändern wir Game.qml so, dass wir daraus einen Tab machen, der eine Seite (Seite) enthält:

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

Innerhalb der Seite beginnen wir mit der Strukturierung der Elemente, die wir im Design erwähnen. Eine Spalte, die alle Elemente enthält (sie werden vertikal platziert), dann werden die Elemente in der folgenden Reihenfolge angeordnet: Beschriftung, Fortschrittsleiste, die 4 Schaltflächen; und um die Optionen zu platzieren, verwenden wir das Row-Element, um sie horizontal zu platzieren.

Spalte {anchorors.top: Gamepage.top anchor.topMargin: 50 Abstand: 15 Breite: parent.width Höhe: parent.height - 50 Label {id: question anchor.topMargin: 500 Text: "Frage?" anchorors.horizontalCenter: parent.horizontalCenter fontSize: "large" font.bold: true} ProgressBar {id: time anchor.horizontalCenter: parent.horizontalCenter} Button {id: resp1 text: "Response 1" anchors.horizontalCenter: parent.horizontalCenter} Schaltfläche {id: resp2 text: "Antwort 2" anchor.horizontalCenter: parent.horizontalCenter} Schaltfläche {id: resp3 text: "Antwort 3" anchorors.horizontalCenter: parent.horizontalCenter} Schaltfläche {id: resp4 text: "Antwort 4" anker .horizontalCenter: parent.horizontalCenter} Zeile {Abstand: 15 anchor.horizontalCenter: parent.horizontalCenter Schaltfläche {id: b50 Text: "50%"} Schaltfläche {id: bCon Text: "Einfrieren"} Schaltfläche {id: bNext text: " Weiter "}} Zeile {Abstand: 15 anchor.horizontalCenter: parent.horizontalCenter Bezeichnung {ID: Fehlertext:" Fehler: 0 "Farbe:" rot "} Bezeichnung {ID: Treffertext:" Treffer: 0 "} Bezeichnung {ID : points text: "Points: 0" fontSize: "medium"}}

Lassen Sie uns sehen, wie wir in jedem Element, das durch sein {} begrenzt ist, unterschiedliche Eigenschaften haben. Im Fall der Beschriftung und der Schaltflächen können wir sehen, dass die Eigenschaft "text" der angezeigte Text ist. Eine wichtige nicht visuelle Eigenschaft ist die ID des Bezeichners », Was uns bei der Implementierung der Anwendungslogik helfen wird.

Am Ende sehen wir das Ergebnis: