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

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

У попередньому розділі підручника ми змогли налаштувати, зібрати і запустити нашу першу програму 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

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

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

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

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

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

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