Vysvetlenie stránok

Naša aplikácia

V predchádzajúcom tutoriáli sa nám podarilo nastaviť, zostaviť a skompilovať našu prvú aplikáciu Kirigami. So základmi na mieste môžeme začať našu cestu k vytvoreniu plne funkčnej aplikácie.

Tieto tutoriály sa zameriajú na vytvorenie aplikácie, ktorá umožní používateľovi vidieť, koľko dní zostáva do udalosti podľa jeho výberu.

Odporúčame vám tiež pozrieť Kirigami Gallery, ktorá poskytuje množstvo užitočných príkladov UI.

V tejto časti sa zameriame na stránky, jeden z kľúčových štrukturálnych prvkov akejkoľvek aplikácie Kirigami.

Stránky

Aplikácie Kirigami sú typicky organizované do stránok pomocou Kirigami.Page. Stránky sú rôzne "obrazovky" aplikácie. Budete chcieť mať stránku venovanú konkrétnym aspektom interakcie vašej aplikácie a na uľahčenie práce môžete vytvoriť rôzne súbory QML pre každú stránku.

Stránky sú organizované v zásobníku stránok, kde sa dajú vkladať a vyberať. Na telefóne sa zobrazuje iba najvrchnejšia stránka, zatiaľ čo na väčšej obrazovke (počítač alebo tablet) sa podľa potreby môže zobraziť viac stránok vedľa seba.

Vráťme sa k súboru Main.qml, ktorý sme vytvorili v predchádzajúcom tutoriáli:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

// Includes relevant modules used by the QML
import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

// Provides basic features needed for all kirigami applications
Kirigami.ApplicationWindow {
    // Unique identifier to reference this object
    id: root

    width: 400
    height: 300

    // Window title
    // i18nc() makes a string translatable
    // and provides additional context for the translators
    title: i18nc("@title:window", "Hello World")

    // Set the first page that will be loaded when the app opens
    // This can also be set to an id of a Kirigami.Page
    pageStack.initialPage: Kirigami.Page {
        Controls.Label {
            // Center label horizontally and vertically within parent object
            anchors.centerIn: parent
            text: i18n("Hello World!")
        }
    }
}

Našu aplikáciu spúšťame na našej Kirigami.Page. Všetko, čo sme do nej zahrnuli, je popisok obsahujúci "Hello World", ale trochu to vylepšíme.

Myšlienka našej aplikácie je, že budeme schopní zobraziť používateľovi množstvo odpočítavaní. Problém s normálnou Kirigami.Page je, že má pevnú vertikálnu veľkosť, takže namiesto toho môžeme použiť Kirigami.ScrollablePage, ktorá už prichádza s vlastným vstavaným posúvačom.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

import QtQuick
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami as Kirigami

Kirigami.ApplicationWindow {
    id: root

    width: 400
    height: 300

    title: i18nc("@title:window", "Day Kountdown")

    pageStack.initialPage: Kirigami.ScrollablePage {
        title: i18nc("@title", "Kountdown")
    }
}

Stránky Kirigami tiež obsahujú pekné nadpisy umiestnené v paneli nástrojov, ktoré rýchlo naznačia používateľovi, na ktorej stránke sa nachádza. Stačí nastaviť nadpis stránky pomocou vlastnosti title Kirigami.ScrollablePage. V tomto prípade sme na to použili jednu z funkcií i18nc(), ktoré sme preskúmali v predchádzajúcom tutoriáli.

pageStack.initialPage: Qt.resolvedUrl("StartPage.qml")