Pagina's uitleggen

Pagina's waarmee u uw de inhoud van uw toepassing kunt organiseren

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.

Deze inleidingen zullen focussen op het maken van een toepassing die de gebruiker laat zien hoeveel dagen er over zijn tot een gebeurtenis naar keuze. Dat betekent niet dat u er niet vanaf zou moeten wijken en uw eigen ding proberen te maken! Zorg er voor dat u er eerst streng op toeziet hoe dingen werken, zodat u kunt aanpassen wanneer dingen in uw eigen code anders zijn. We bevelen u ook aan om de Kirigami galerij te bekijken, die een aantal nuttige UI-voorbeelden levert en gemakkelijke toegang tot alle code.

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 typisch georganiseerd in Pagina's . Dit zijn de verschillende "screens" van een toepassing. U zult een pagina willen hebben toegewijd aan 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.

Een enkele pagina op de telefoon

Twee pagina's naast elkaar op het bureaublad

Laten we teruggaan naar het bestand main.qml dat we gemaakt hebben in onze vorige inleiding:

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

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, maar geen getob: Kirigami ondersteunt ook schuifbare pagina's. Kirigami.ScrollablePage gaat onze hoofdpagina nu vervangen.

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