Explicación de las páginas

Nuestra aplicación

En el tutorial anterior hemos configurado, construido y compilado nuestra primera aplicación de Kirigami. Con los conceptos básicos en su lugar, podemos comenzar nuestro viaje hacia la creación de una aplicación repleta de funcionalidad.

Estos tutoriales se centrarán en la creación de una aplicación que permita al usuario ver cuántos días quedan hasta un evento de su elección. ¡Eso no significa que no deba desviarse y tratar de hacer su propia creación! Solo tiene que asegurarse de prestar mucha atención a cómo funcionan las cosas primero, para poder ajustarlas cuando sean diferentes en su propio código. También te recomendamos que consulte la Galería de Kirigami, que proporciona un buen número de útiles ejemplos de interfaces de usuario, así como un cómodo acceso a todo el código fuente.

En esta sección nos centraremos en las páginas, uno de los elementos estructurales clave de cualquier aplicación Kirigami.

Páginas

Las aplicaciones de Kirigami suelen estar organizadas en Páginas . Son las diferentes ‘Pantallas’ de una aplicación. Querrá tener una página dedicada a los aspectos específicos de la interacción de su aplicación, y puede crear diferentes archivos QML, cada uno de los cuales contiene el código de páginas separadas.

Las páginas están organizadas en una pila de páginas donde se apilar y extraer. En un teléfono solo se muestra la página superior, mientras que en una pantalla más grande (escritorio o tableta) se pueden mostrar varias páginas una al lado de la otra.

Volvamos al archivo main-qml que hemos creado en el anterior tutorial:

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

Hacemos que nuestra aplicación empiece en nuestra Kirigami.Page. Todo lo que hemos incluido es una etiqueta que contiene 'Hola mundo', pero vamos a arreglar un poco las cosas.

La idea que hay detrás de nuestra aplicación es la capacidad de poder mostrar un buen número de cuentas atrás al usuario. El problema con una Kirigami.Page normal es que tiene un tamaño vertical fijo. Pero no se preocupe: Kirigami también admite páginas desplazables. Kirigami.ScrollablePage va a sustituir a nuestra Kirigami.Page ahora.

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

Las páginas de Kirigami también cuentan con títulos claros situados dentro de la barra de herramientas que le indican rápidamente al usuario en qué página se encuentra. Todo lo que necesitamos para definir un título de página es usar la propiedad title de Kirigami.ScrollablePage. En este caso, usamos una de las funciones i18nc() que exploramos en nuestro tutorial anterior para este fin.

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