Klarigante paĝojn

Paĝoj permesas al vi organizi vian aplikaĵenhavon

Nia apo

En la antaŭa lernilo, ni sukcesis agordi, konstrui kaj kompili nian unuan Kirigami-aplikaĵon. Kun la bazaĵoj en la loko, ni povas komenci nian vojaĝon al kreado de plene prezentita aplikaĵo.

These tutorials will focus on creating an application that lets the user see how many days are left until an event of their choice.

We also recommend you check out the Kirigami Gallery, which provides a number of useful UI examples.

En ĉi tiu sekcio ni koncentriĝos pri paĝoj, unu el la ŝlosilaj strukturaj elementoj de iu ajn Kirigami-apliko.

Paĝoj

Kirigami apps are typically organized in pages by using Kirigami.Page . Pages are the different "screens" of an app. You will want to have a page dedicated to specific aspects of your app's interaction, and to make things easier you can create different QML files for each page.

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.

A single page on the phone

A single page on the phone

Two pages next to each other on the desktop

Two pages next to each other on the desktop

Let's go back to the Main.qml file we created in our previous tutorial:

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

Ni igas nian aplikaĵon komenciĝi al nia Kirigami.Paĝo . Ĉio, kion ni enmetis en ĝi, estas etikedo enhavanta "Saluton Mondo", sed ni iom plibonigos aferojn.

The idea behind our app is that we're going to be able to display a bunch of countdowns to the user. The problem with a normal Kirigami.Page is that it has a fixed vertical size, so instead we can use a Kirigami.ScrollablePage , which already comes with its own built-in scrollbar.

 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-paĝoj ankaŭ prezentas bonordajn titolojn metitaj ene de la ilobreto, rapide indikante al la uzanto sur kiu paĝo ili estas. Ĉio, kion ni devas fari, estas agordi paĝotitolon per la titolo-propreco de Kirigami.ScrollablePage . En ĉi tiu kazo, ni uzis unu el la funkcioj i18nc(), kiujn ni esploris en nia antaŭa lernilo tiucele.