Förklaring av sidor

Vårt program

I föregående handledning, lyckades vi ställa in, bygga och kompilera vårt första Kirigami-program. Med grunderna på plats, kan vi börja vår resa mot att skapa ett program med fullständig funktion.

De här handledningarna fokuserar på att skapa ett program som låter användaren se hur många dagar som är kvar till en valfri händelse.

Vi rekommenderar också att du tittar på Kirigami-galleriet, som ger ett antal användbara exempel på användargränssnitt.

I det här avsnittet fokuserar vi på sidor, ett av de viktigaste strukturelementen i alla Kirigami-program.

Sidor

Kirigami-program är typiskt organiserade i sidor genom att använda Kirigami.Page. Sidor är de olika "skärmarna" i ett program. Du bör ha sidor tillägnade till specifika aspekter i programmets interaktion, och för att göra saker och ting lättare kan du skapa olika QML-filer för varje sida.

Pages are organized in a page stack where they can be pushed and popped. On a phone only the top-most page is shown, whereas on a larger screen (desktop or tablet), if desired, multiple pages can be shown next to each other.

Låt oss gå tillbaka till filen Main.qml vi skapade i föregående handledning:

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

Vi gör så att vårt program startar på vår Kirigami.Page. Allt vi har inkluderat på den är en beteckning som innehåller "Hello World", men vi kommer att piffa upp den lite grand.

Idén bakom vårt program är att vi ska kunna visa ett antal nedräknare för användaren. Problemet med en normal Kirigami.Page är att den har en fast vertikal storlek, så istället kan vi använda en Kirigami.ScrollablePage, som redan levereras med sin egen inbyggda rullningslist.

 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 pages also feature neat titles placed within the toolbar, quickly indicating to the user which page they are on. All we need to do is to set a page title using the title property of Kirigami.ScrollablePage. In this case, we used one of the i18nc() functions we explored in our previous tutorial to this end.

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