Klarigante paĝojn

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.

Ĉi tiuj lerniloj koncentriĝos pri kreado de aplikaĵo, kiu ebligas al la uzanto vidi kiom da tagoj restas ĝis evento de ilia elekto.

Ni ankaŭ rekomendas vin kontroli la Kirigami Gallery, kiu provizas kelkajn utilajn UI-ekzemplojn.

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

Paĝoj

Kirigami-aplikoj estas kutime organizitaj en paĝoj per uzado de Kirigami.Paĝo. Paĝoj estas la malsamaj "ekranoj" de aplikaĵo. Vi volas havi paĝon dediĉitan al specifaj aspektoj de la interago de via programo, kaj por faciligi la aferojn vi povas krei malsamajn QML-dosierojn por ĉiu paĝo.

Paĝoj estas organizitaj en paĝa stako kie ili povas esti puŝitaj kaj ŝtopitaj. Sur telefono nur la plej supra paĝo estas montrata, dum sur pli granda ekrano (skribotablo aŭ tablojdo), se vi volas, pluraj paĝoj povas esti montritaj unu apud la alia.

Ni reiru al la dosiero Main.qml, kiun ni kreis en nia antaŭa lernilo:

 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.

La ideo malantaŭ nia programo estas, ke ni povos montri amason da retronombradoj al la uzanto. La problemo kun normala Kirigami.Paĝo estas, ke ĝi havas fiksan vertikalan grandecon, do anstataŭe ni povas uzi Kirigami.ScrollablePage, kiu jam venas kun sia propra enkonstruita rulumbreto.

 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.

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