Pagina's uitleggen

Onze toepassing (app)

In de vorige inleiding waren we in staat om onze eerste Kirigami toepassing op te zetten, te bouwen, en te compileren. Met de basis op zijn plaats, kunne we onze reis beginnen naar het maken van een toepassing met volledige mogelijkheden.

In deze instructie zullen we ons voornamelijk richten op de creatie van een programma waarin de gebruiker kan zien hoeveel dagen het nog duurt tot een gebeurtenis naar keuze.

We raden ook aan om eens te kijken in de Kirigami Gallery, waar een aantal handige UI voorbeelden te vinden zijn.

In deze sectie leggen we de focus op pagina's, een van de voornaamste structurele elementen van elke Kirigami toepassing.

Pagina's

Kirigami toepassingen zijn standaard georganiseerd in pagina's door Kirigami.Page te gebruiken. Pagina's zijn de verschillende "schermen" van een toepassing. U zult een pagina willen hebben gericht op specifieke aspecten van de interactie met uw toepassing en om de zaken eenvoudiger te maken kunt u verschillende QML bestanden aanmaken, één voor elke pagina.

Pagina's zijn georganiseerd in een paginastapel waar ze ingestopt en uitgehaald kunnen worden. Op een telefoon wordt alleen de bovenste pagina getoond, terwijl op een groter scherm (bureaublad of tablet), indien gewenst, meerdere pagina's naast elkaar getoond kunnen worden.

Laten we teruggaan naar het bestand Main.qml dat we gemaakt hebben in onze vorige handleiding:

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

We zorgen dat onze toepassing start op onze Kirigami.Page. Alles wat we erin hebben ingevoegd is een label met "Hello World" erin, maar we gaan de zaken een beetje opfleuren.

Het idee achter onze toepassing is dat we in staat zullen zijn om een aantal aftellingen aan de gebruiker te tonen. Het probleem met een normale Kirigami.Page is dat het een vaste verticale grootte heeft, dus in plaats daarvan gebruiken we Kirigami.ScrollablePage, die al komt met zijn eigen ingebouwde schuifbalk.

 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 pagina's hebben ook nette titels geplaatst in de werkbalk, snel aan de gebruiker laten zien in welke pagina zij zijn. Alles wat we moeten doen is een paginatitel instellen met de eigenschap title van Kirigami.ScrollablePage. In dit geval, gebruikten we er een van de functies i18nc(), die we hiervoor bekeken hebben in onze vorige inleiding.

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