Объяснение страниц

Наше приложение

В предыдущем руководстве удалось настроить, собрать и скомпилировать первое приложение Kirigami. Когда основы освоены, можно приступить к созданию полнофункционального приложения.

Эти руководства будут посвящены созданию приложения, позволяющего пользователю видеть, сколько дней осталось до выбранного события.

Также рекомендуется ознакомиться с Kirigami Gallery, где представлен ряд полезных примеров интерфейса.

В этом разделе основное внимание будет уделено страницам — одному из ключевых структурных элементов любого приложения 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")