Förklaring av sidor

Sidor låter dig organisera programmets innehåll

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 händelse de väljer. Det betyder inte att du inte kan avvika och försöka skapa något eget. Säkerställ bara att du noggrant observerar hur saker och ting fungerar först, så att du kan justera när saker är annorlunda i din egen kod. Vi rekommenderar också att to tar en titt på Kirigami galleri, som tillhandahåller ett antal användbara exempel på användargränssnitt och enkel åtkomst till all kod.

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 . De är de olika ‘skärmarna’ i ett program. Du bör ha sidor tillägnade till specifika aspekter i programmets interaktion, och du kan skapa olika QML-filer som var och en innehåller koden för separata sidor.

Sidor organiseras i en sidstapel där de kan läggas till eller tas bort. På en telefon visas bara den översta sidan, medan på en större skärm (skrivbordsdator eller surfplatta) kan flera sidor visas intill varandra.

En enda sida på telefonen

Två sidor intill varandra på skrivbordsdatorn

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

Vi gör så att vårt program startar på 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, men var inte orolig: Kirigami stöder också rullningsbara sidor. Kirigami.ScrollablePage kommer nu att ersätta vår Kirigami.Page.

Kirigami.ScrollablePage {
    title: i18nc("@title", "Kountdown")
    ...
}

Kirigami-sidor har också snygga titlar placerade inne i verktygsraden, som snabbt anger för användaren vilken sida de är på. Allt vi behöver göra är att ställa in en sidtitel genom att använda egenskapen title i Kirigami.ScrollablePage. Här använder vi en av i18nc() funktionerna som vi utforskade i vår förra handledning i detta syfte.