Linhas da página e pilhas de páginas

O PageRow

A PageRow é um contentor que dispõe os itens na horizontal numa única linha. Se todos os itens-filhos não couberem na PageRow , a mesma comportar-se-a como uma superfície Flickable e ficará como uma área de colunas com deslocamento horizontal.

Uma PageRow poderá mostrar uma única página ou várias como colunas, dependendo da largura da janela. Num telemóvel, uma única coluna ficará mais legível, enquanto num 'tablet' ou computador poderá ter visível mais que uma coluna.

As colunas poderão ter todas o mesmo tamanho fixo, ajustarem-se automaticamente com o implicitWidth ou expandirem-se automaticamente para ocupar toda a largura disponível. Por omissão, a última coluna ficará expandida para ocupar todo o espaço disponível.

Poderá aceder aos métodos da área das colunas com a propriedade pageStack do seu elemento Kirigami.ApplicationWindow ou a partir de qualquer lado com o applicationWindow().pageStack.

A página inicial é adicionada com a propriedade pageStack.initialPage. Por exemplo: numa aplicação simples que obriga o utilizador a autenticar-se, a página inicia seria uma página de autenticação.

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

Assim que o utilizador se tenha autenticado na aplicação, terá de substituir a página de autenticação com a página inicial da aplicação. Para o fazer, terá de usar o pageStack.replace, removendo a página LoginPage e substituindo-a por uma HomePage.

// LoginPage.qml
Kirigami.Page {
    // formulário de autenticação

    Button {
        onClicked: {
            const user = Backend.authentificate(usernameField.text, passwordField.text);
            if (user) {
                applicationWindow().pageStack.replace("qrc:/HomePage.qml", {
                    user: user, // dar informações do utilizador registado à página Web
                });
            } else {
                // mostrar uma mensagem de erro
            }
        }
    }
}

Agora imagine que tem uma página de configuração que pretende que o utilizador aceda a partir da página inicial. Irá querer que o utilizador regresse à página inicial, para que não possa usar o replace. Em vez disso, iria usar o push para colocar uma página nova na pilha.

// ConfigurationPage.qml
Kirigami.Page {
    required property string var1
}

// HomePage.qml
applicationWindow().pageStack.push("qrc:/MyPage.qml", {
    'var1': 'Hello',
});

Também poderá:

• fazer pop de uma página (que remove a última página na pilha) ou
• usar o insertPage para inserir uma página numa posição específica na pilha,
• usar o movePage para mover algumas páginas específicas dentro da pilha, ou
• clear (limpar) todas as páginas da pilha.

Também poderá modificar o currentIndex para mudar a página activa de momento de forma programada ou usar o flickBack para simular a passagem de uma página para trás na pilha.

Camadas

Até ao momento, ainda só vimos a navegação horizontal a funcionar numa pilha a 2 dimensões. Também poderá usar camadas na sua aplicação para passar uma página de ecrã completo para a sua aplicação.

Neste caso, só está disponível uma página ao mesmo tempo num dispositivo móvel e no computador.

As camadas estão acessíveis a partir do pageStack.layers e usam a mesma API do pageStack.