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
Kirigami apps are typically organized in Pages . Those are the different "screens" of an app. You will want to have a page dedicated to specific aspects of your app's interaction, and to make things easier you can create different QML files, one for each page.
Pages are organized in a page stack where they can be pushed and popped. On a phone only the top-most page is shown, whereas on a larger screen (desktop or tablet), if desired, multiple pages can be shown next to each other.
Nota
KDE has Human Interface Guidelines (HIG) that go into detail about how to best design your application. The guidelines help ensure your application remains usable, consistent, and aesthetic.
A Kirigami.Page inherits from a Controls.Page , and as such you can use the latter's properties as well.
Volvamos al archivo main-qml
que hemos creado en el anterior tutorial:
|
|
We make our application start to our Kirigami.Page . All we have included in it is a label containing "Hello World", but we're going to spruce things up a little.
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 ser ahora nuestra página principal.
Advertencia
Si se ha adelantado al tutorial, es posible que haya notado que también existe una ScrollView que puede usar para contener sus componentes. Sin embargo, NO coloque unaScrollView
dentro de una ScrollablePage
, ya que esto puede causar problemas. Los elementos secundarios de una ScrollablePage
ya están funcionalmente en una ScrollView
.
|
|
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 tenemos que hacer es definir un título de página usando la propiedad title
de [Kirigami.ScrollablePage(docs:kirigami2;ScrollablePage)]. En este caso, usamos una de las funciones i18nc()
que exploramos en nuestro tutorial anterior para este fin.
Nota
You could also choose to define your page within its own QML document. To do so, you'd create the new QML file, for example "StartPage.qml", add it to your resources.qrc
file, and set the window's first page to load it, like so:
pageStack.initialPage: Qt.resolvedUrl("StartPage.qml")
pageStack.initialPage
sets the initial Page of the application's page stack, and
Qt.resolvedUrl
converts the relative URL of the QML file into an absolute one.
Existe más información sobre estructuras de páginas alternativas dentro de nuestra documentación de Kirigami.