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 skladu strani, kjer jih je mogoče nalagati in odstranjevati. Na telefonu je prikazana le skrajna zgornja stran, na večjem zaslonu (namizju ali tablici) pa je po želji mogoče prikazati več strani eno poleg druge.

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, ki so v orodni vrstici, da uporabniku hitro označujejo, na kateri strani so. Vse, kar moramo storiti za nastavitev naslova strani z lastnostjo 'title' v Kirigami.ScrollablePage. V tem primeru smo uporabili eno od funkcij 'i18nc()', ki smo jo raziskali že v našem prejšnjem učbeniku.

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