Spiegazione delle pagine

I nostri programmi

Nell'esercitazione precedente siamo riusciti a creare, a costruire e a compilare la nostra prima applicazione Kirigami. Con queste basi possiamo iniziare il viaggio verso la creazione di un'applicazione piena di funzionalità.

Queste esercitazioni si concentreranno sulla creazione di un'applicazione che consenta all'utente di vedere quanti giorni mancano all'evento di sua scelta.

Ti consigliamo inoltre di dare un'occhiata a Galleria Kirigami, che fornisce una serie di utili esempi di interfaccia utente.

In questa sezione ci focalizzeremo sulle pagine, uno degli elementi strutturali chiave di ogni applicazione Kirigami.

Le pagine

I programmi Kirigami sono generalmente organizzati in pagine, utilizzando Kirigami.Page. Le pagine sono le diverse "schermate" di un'applicazione. Ti consigliamo di avere una pagina dedicata ad aspetti specifici dell'interazione col tuo programma: per semplificare le cose puoi creare diversi file QML per ogni pagina.

Le pagine sono organizzate in una pila di pagine, nella quale possono essere messe o tirate fuori. Su un telefono viene mostrata solo la pagina più in alto, mentre su uno schermo più grande (desktop o tablet), se lo si desidera, è possibile visualizzare più pagine una accanto all'altra.

Torniamo al file Main.qml che abbiamo creato nell'esercitazione precedente:

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

Facciamo iniziare la nostra applicazione dalla Kirigami.Page: tutto ciò che abbiamo incluso è un'etichetta contenente "Hello World", ma miglioreremo un po' le cose.

L'idea alla base del nostro programma è che saremo in grado di mostrare all'utente una serie di conti alla rovescia. Il problema con una normale Kirigami.Page è che ha una dimensione verticale fissa: possiamo invece usare una Kirigami.ScrollablePage, che è già dotata della propria barra di scorrimento incorporata.

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

Le pagine di Kirigami presentano anche titoli accurati posizionati nella barra degli strumenti, che indicano rapidamente all'utente su quale pagina si trovano. Tutto quello che dobbiamo fare è impostare un titolo di pagina utilizzando la proprietà title proprietà di Kirigami.ScrollablePage. In questo caso abbiamo utilizzato una delle funzioni i18nc(), che abbiamo già esplorato nella nostra esercitazione precedente.

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