Razlaganje strani

Naša aplikacija

V prejšnjem učbeniku, smo uspeli vzpostaviti, graditi, in prevesti našo prvo Kirigami aplikacijo. Z osnovami, ki so na mestu, lahko začnemo naše potovanje v smeri ustvarjanja celotne aplikacije z veliko možnostmi.

Te učbeniki se bodo osredotočili na ustvarjanje aplikacije, ki uporabniku omogoča, da vidi, koliko dni je ostalo do dogodka po lastni izbiri.

Priporočamo tudi, da si ogledate galerijo Kirigami, ki ponuja številne uporabne primere uporabniškega vmesnika.

V tem razdelku se bomo osredotočili na strani, enega ključnih strukturnih elementov vsake Kirigami aplikacije.

Strani

Aplikacije Kirigami so običajno organizirane na straneh z uporabo Kirigami.Page. Strani so različni "zasloni" aplikacije. Želeli boste imeti stran, ki je namenjena določenim vidikom interakcije vaše aplikacije, in da bi stvari olajšali, lahko ustvarite različne datoteke QML za vsako stran.

Strani so organizirane v sklad strani, kjer jih je mogoče premikati in odpirati. Na telefonu je prikazana samo zgornja stran, medtem ko je na večjem zaslonu (namizni računalnik ali tablični računalnik) po želji mogoče prikazati več strani drugo ob drugi.

Vrnimo se k datoteki Main.qml, ki smo jo ustvarili v prejšnjem učbeniku:

 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šo aplikacijo zaženemo z našo stranjo Kirigami.Page. Vse, kar smo vključili vanjo, je oznaka, ki vsebuje 'Hello World', ampak bomo obnašanje še malo izboljšali.

Ideja naše aplikacije je, da bomo uporabniku lahko prikazali kup odštevanj. Težava z običajno stranjo Kirigami.Page je, da ima fiksno navpično velikost, zato lahko namesto tega uporabimo Kirigami.ScrollablePage, ki ima že priložen lasten vgrajen drsnik.

 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")
    }
}

Kirigami strani imajo tudi lepe naslove, nameščene v orodni vrstici, ki uporabniku hitro pokažejo, na kateri strani se nahaja. Vse, kar moramo storiti, je, da nastavimo naslov strani z uporabo lastnosti title strani Kirigami.ScrollablePage. V tem primeru smo za ta namen uporabili eno od funkcij i18nc(), ki smo jih raziskali v prejšnji vadnici.

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