Wyjaśnianie stron

Nasza aplikacja

W poprzednim samouczku, udało nam się utworzyć oraz zbudować naszą pierwszą aplikację Kirigami. Posiadając podstawy, możemy rozpocząć naszą przygodę z tworzeniem pełnowartościowych aplikacji.

Samouczki te skupią się na tworzeniu aplikacji, która umożliwia użytkownikowi zobaczenie ile dni pozostało do wydarzenia, które sobie określił. Nie oznacza to jednak, że nie wolno ci zboczyć i tworzyć swoich własnych rzeczy! Najpierw upewnij się tylko, że wiesz jak rzeczy działają tak, abyś mógł się dostosować, gdy rzeczy będą miały działać inaczej w twoim kodzie. Polecamy także zajrzenie do Galerii Kirigami, która zawiera kilka przydatnych przykładów interfejsów i umożliwia łatwy dostęp do kodu.

W tym obszarze skupimy się na stronach, jednej z głównych rzeczy aplikacji Kirigami.

Strony

Aplikacje Kirigami są zazwyczaj ułożone na Stronach . Są to różne ‘Ekrany‘ aplikacji. Zalecamy posiadanie stron dla różnych części oddziaływania z twoją aplikacją. Możesz tworzyć różne pliki QML, gdzie każdy zawiera kod dla innej strony osobno.

Strony są ułożone w stosy stron, na które mogą być wrzucone lub z których mogą być pobrane. Na telefonach, pokazywana jest tylko szczytowa strona, podczas gdy na dużym ekranie (komputer lub tablet) wiele stron może być pokazanych obok siebie.

Wróćmy do pliku main.qml, który stworzyliśmy w naszym poprzednim samouczku:

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

Ustawiamy naszą aplikację tak, aby rozpoczynała na naszej stronie Kirigami.Page. Znajduje się na niej tylko etykieta, zawierająca tekst 'Hello World', lecz dodamy tam jeszcze trochę.

Zamysłem naszej aplikacji jest wyświetlenie kilku odliczań naszemu użytkownikowi. Kirigami.Page przysparza kłopotu, bo ma rozmiar w pionie ustawiony na sztywno, lecz nie martw się: Kirigami obsługuje także przewijane strony. Teraz Kirigami.ScrollablePage zastąpi nasze Kirigami.Page.

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

Strony Kirigami zawierają także ładne tytuły umieszczone wewnątrz pasków narzędzi, szybko wskazując użytkownikowi, na której stronie się znajduje. Jedyne, co musimy zrobić, to ustawić właściwość title w Kirigami.ScrollablePage. W tym przypadku użyliśmy i18nc(), które sprawdziliśmy w poprzednim samouczku.

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