Razlaganje strani

Strani omogočajo organiziranje vsebine aplikacije

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 vaje se bodo osredotočile na ustvarjanje aplikacije, ki uporabniku dovoli, da vidi, koliko dni je ostalo do dogodka po svoji izbiri. To ne pomeni, da ne smete odstopati in poskušati ustvariti svoje stvari! Samo poskrbite, da boste pozorno pozorni na to, kako stvari delujejo v prvo, tako da se lahko prilagodite, ko so stvari drugačne v vaši lastni kodi. Priporočamo vam tudi, da preverite Kirigami Gallery, ki ponuja številne uporabne primere uporabniškega vmesnika in omogoča enostaven dostop do vse kode.

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

Strani

Kirigami aplikacije so običajno organizirane v strani Pages . To so različni "zasloni" aplikacije. Želeli boste imeti stran, posvečeno določenim vidikom interakcije v aplikaciji, in lahko ustvarite različne QML datoteke, ki vsebujejo kodo za vsako stran.

Strani so organizirane v skladu strani page stack , kjer jih je mogoče pokriti (angl. push) in odkriti (angl. pop). V telefonu je prikazana le vrhnja stran, na večjem zaslonu (namizju ali tabličnem računalniku) pa je mogoče med seboj pokazati več strani eno zraven druge.

Ena sama stran na telefonu

Dve strani druga poleg druge na namizju

Pojdimo nazaj na datoteko 'main.qml', ki smo jo ustvarili v prejšnji vaji:

 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
// Includes relevant modules used by the QML
import QtQuick 2.15
import QtQuick.Controls 2.15 as Controls
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.20 as Kirigami

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

    // 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.

Zamisel naše aplikacijo je, da bomo lahko uporabniku prikazali nekaj odštevanj. Težava pri normalni strani Kirigami.Page je v tem, da ima fiksno navpično velikost, vendar ne skrbite: Kirigami podpira tudi pomikanje strani. Stran Kirigami.ScrollablePage bo zdaj zamenjal našo glavno stran.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import QtQuick 2.15
import QtQuick.Controls 2.15 as Controls
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.20 as Kirigami

Kirigami.ApplicationWindow {
    id: root

    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ši prejšnji vaji.