Filas de páginas y pilas de páginas

Añadir flujo a la aplicación: añadir, eliminar y sustituir páginas de diferentes formas

PageRow

Una PageRow es un contenedor que distribuye los elementos horizontalmente en una fila. Si todos los elementos hijos no caben en la PageRow , se comportará del mismo modo que una superficie Flickable y se convertirá en una vista de columnas que se puede desplazar horizontalmente.

Una PageRow puede mostrar una única página o varias de ellas como columnas, dependiendo de la anchura de la ventana. En un teléfono móvil será visible una única columna, mientras que en una tableta o en el escritorio deberían ser visibles más de una columna a la vez.

Las columnas pueden tener todas el mismo tamaño fijo, modificar su tamaño por sí mismas con implicitWidth o expandirse automáticamente para ocupar todo el ancho disponible. De forma predeterminada, la última columna se expandirá para ocupar todo el espacio disponible.

Captura de pantalla de una PageRow

Puede acceder a los métodos de la vista de columnas desde la propiedad pageStack del elemento Kirigami.ApplicationWindow o desde cualquier otro sitio usando applicationWindow().pageStack.

La página inicial se añade con la propiedad pageStack.initialPage. Como ejemplo: en una aplicación sencilla que necesite que el usuario se autentique, la página inicial sería una página de inicio de sesión.

Kirigami.ApplicationWindow {
    pageStack.initialPage: LoginPage {}
}

Una vez que el usuario haya iniciado sesión en la aplicación, debería sustituir la página de inicio de sesión con la página de inicio de la aplicación. Para ello, usaría pageStack.replace, eliminando la LoginPage para sustituirla con una HomePage.

// LoginPage.qml
Kirigami.Page {
    // formulario de inicio de sesión

    Button {
        onClicked: {
            const user = Backend.authentificate(usernameField.text, passwordField.text);
            if (user) {
                applicationWindow().pageStack.replace("qrc:/HomePage.qml", {
                    user: user, // proporcionar la información del usuario registrado a la página
                });
            } else {
                // mostrar un mensaje de error
            }
        }
    }
}

Ahora imagine que tiene una página de configuración a la que quiere que el usuario pueda acceder desde la HomePage. Le gustaría que el usuario pudiera volver a la HomePage, por lo que no puede usar replace. En lugar de ello, usará push para introducir una nueva página en la pila.

// ConfigurationPage.qml
Kirigami.Page {
    required property string var1
}
// HomePage.qml
applicationWindow().pageStack.push("qrc:/MyPage.qml", {
    'var1': 'Hello',
});

También puede:

  • extraer una página (que elimina la última página de la pila),
  • usar insertPage para insertar una página en una posición determinada de la pila,
  • usar movePage para mover las páginas indicadas dentro de la pila, o
  • borrar todas las páginas de la pila.

También puede modificar currentIndex para cambiar la página activa de forma programable, o usar flickBack para simular que ha movido una página hacia atrás en la pila.

Capas

Hasta ahora solo hemos visto la navegación horizontal funcionando en una pila bidimensional. Las capas también se pueden usar en una aplicación para insertar en ella una página a pantalla completa.

En este caso, solo una página es visible a la vez en el móvil y en el escritorio.

Puede acceder a las capas desde pageStack.layers. Las capas usan la misma API que pageStack.