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

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

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

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

Ми також рекомендуємо вам ознайомитися зі галереєю Kirigami, де можна знайти декілька корисних прикладів інтерфейсу користувача.

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

Сторінки

Програми Kirigami типово поділено на сторінки за допомогою Kirigami.Page. Сторінки є різними ‘екранами' програми. Вам знадобляться сторінки, кожну з яких присвячено певним аспектам взаємодії із вашою програмою, і, щоб полегшити справу, ви можете створити різні файли 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
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!")
        }
    }
}

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

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

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

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