Spiegazione delle pagine

I nostri programmi

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

Questi tutorial 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 alla 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.

Pagine

Le app Kirigami sono generalmente organizzate 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 della tua app e per semplificare le cose puoi creare diversi file QML per ogni pagina.

Le pagine sono organizzate in uno stack di pagine dove possono essere spostate e spuntate. 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 alla nostra Kirigami.Page. Tutto ciò che abbiamo incluso è un'etichetta contenente "Hello World", ma miglioreremo un po' le cose.

L'idea alla base della nostra app è che saremo in grado di mostrare all'utente una serie di conti alla rovescia. Il problema con una Kirigami.Page normale è che ha una dimensione verticale fissa, quindi possiamo 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 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, a questo scopo abbiamo utilizzato una delle funzioni i18nc() che abbiamo esplorato nel nostro tutorial precedente.

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