Пояснення щодо сторінок

Наша програма

У попередньому розділі підручника ми змогли налаштувати, зібрати і запустити нашу першу програму Kirigami. Тепер, коли нам відомі основи, ми можемо розпочати нашу подорож до створення повнофункціональної програми.

У цих розділах підручника акцентовано створення програми, за допомогою якої користувач зможе бачити, скільки днів лишилося до певної вибраної події. Це не означає, що ви не можете відхилитися від запропонованих ідей і реалізувати власну! Достатньо лише приділити спочатку увагу тому, як усе працює, щоб потім можна було скоригувати код і створити власну програму. Ми також рекомендуємо скористатися Галереєю Kirigami, у якій наведено декілька корисних прикладів інтерфейсу користувача і забезпечено простий доступ до відповідного коду.

У цьому розділі ми зосередимося на сторінках, одному з ключових структурних елементів будь-якої програми Kirigami.

Сторінки

Програми Kirigami типово поділено на сторінки . Сторінки є різними ‘екранами' програми. Вам знадобляться сторінки, кожну з яких присвячено певним аспектам взаємодії із вашою програмою, і, щоб полегшити справу, ви можете створити різні файли QML, кожен з яких міститиме код для окремої сторінки.

Сторінки упорядковано у стос сторінок , до якого можна заштовхувати сторінки і з якого можна ці сторінки виштовхувати. На телефоні буде показано лише верхню сторінку, а на пристроях із більшим екраном (комп'ютері або планшеті) може бути показано, якщо потрібно, декілька сторінок, поруч одна з одною.

Повернімося до файла main.qml, який ми створили у нашому попередньому розділі підручника:

 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

// Includes relevant modules used by the QML
import QtQuick 2.15
import QtQuick.Controls 2.15 as Controls
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.20 as Kirigami

// Provides basic features needed for all kirigami applications
Kirigami.ApplicationWindow {
    // Unique identifier to reference this object
    id: root

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

Наша програма запускатиметься з Kirigami.Page . Усе, що ми включили до цієї сторінки — це мітка «Hello World», але ми маємо намір дещо розширити ці можливості.

Ідея нашої програми полягає у можливості показу користувачеві декількох відліків. Проблема звичайного об'єкта Kirigami.Page полягає у тому, що він має фіксований вертикальний розмір. Але не переймайтеся — у Kirigami передбачено і підтримку сторінок із можливістю гортання вмісту. Тепер нашою головною сторінкою буде Kirigami.ScrollablePage .

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

import QtQuick 2.15
import QtQuick.Controls 2.15 as Controls
import QtQuick.Layouts 1.15
import org.kde.kirigami 2.20 as Kirigami

Kirigami.ApplicationWindow {
    id: root

    title: i18nc("@title:window", "Day Kountdown")

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

У сторінок Kirigami також є чудові заголовки, які розташовуються на панелі інструментів, надаючи користувачеві дані щодо того, з якою сторінкою він працює. Нам достатньо встановити заголовок сторінки за допомогою властивості title об'єкта Kirigami.ScrollablePage . У цьому випадку ми використали одну з функцій i18nc(), які обговорювали у одному з попередніх розділів підручника.

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