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 gemakkelijk toegang geeft 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 u kunt verschillende QML bestanden maken ieder de code bevattend voor aparte pagina’s.

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

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 Kirigami.Page nu vervangen.

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.