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

Ti učbeniki se bodo osredotočili 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 . 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 ločene strani.

Strani so organizirane v skladu strani, 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.

Pojdimo nazaj na datoteko '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

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

// Base element, provides basic features needed for all kirigami applications
Kirigami.ApplicationWindow {
    // ID provides unique identifier to reference this element
    id: root

    // Window title
    // i18nc is useful for adding context for translators, also lets strings be changed for different languages
    title: i18nc("@title:window", "Hello World")

    // Initial page to be loaded on app load
    pageStack.initialPage: Kirigami.Page {

        Controls.Label {
            // Center label horizontally and vertically within parent element
            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 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. 'Kirigami.ScrollablePage' bo zamenjal naš 'Kirigami.Page'.

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