Disposições de Formulários

Crie facilmente áreas de interacção atractivas com os FormLayout's do Kirigami

Os componentes Kirigami.FormLayout tornam simples para si a criação de formulários em conformidade com as Linhas-Mestras de Interface Humana do KDE. São óptimas para janelas de configuração e para grandes grupos de controlos e campos de entrada relacionados entre si.

Quando tiverem espaço suficiente, as disposições dos formulários irão ocupar duas colunas. A coluna da esquerda será ocupada pelos textos fornecidos pelos componentes-filhos do formulário, enquanto o lado direito será ocupado pelos filhos propriamente ditos. Em janelas com mais restrições de espaço (ou em dispositivos móveis), os formulários irão consistir numa única coluna vertical com os textos dos componentes-filhos colocados logo acima do seu componente respectivo.

Formulário simples

Os componentes Kirigami.FormLayout são semelhantes aos componentes Layout do QtQuick, como o ColumnLayout ou o RowLayout. Os componentes filhos serão organizados automaticamente de acordo com o tamanho disponível na disposição do formulário.

Os filhos de um Kirigami.FormLayout têm uma propriedade chamada Kirigami.FormData.label. Esta propriedade permite-lhe mudar o texto que será apresentado no componente-filho em questão.

import QtQuick 2.6
import QtQuick.Layouts 1.2
import QtQuick.Controls 2.2 as Controls
import org.kde.kirigami 2.4 as Kirigami

Kirigami.Page {

    Kirigami.FormLayout {
        id: layout
        Layout.fillWidth: true

        Controls.TextField {
            Kirigami.FormData.label: "TextField 1:"
        }
        Controls.TextField {
            Kirigami.FormData.label: "TextField 2:"
        }
        Controls.TextField {
            Kirigami.FormData.label: "TextField 3:"
        }
    }

}
Um FormLayout simples

Secções e separadores

Os FormLayouts também podem ser divididos em secções. Definir onde começa uma secção é tão simples como configurar o Kirigami.FormData.isSection de um componente-filho como verdadeiro. Isto irá fornecer ao componente alguma margem-extra no topo para demarcar o início da secção nova.

Os componente Kirigami.Separator são mais adequados para iniciar secções novas. Um Kirigami.Separator irá desenhar uma linha horizontal fina, marcando o fim de uma secção. Se não quiser ter uma linha desenhada entre secções, poderá usar uma propriedade Item normal do QML. Em alternativa, poderá usar a propriedade Kirigami.FormData.isSection em qualquer outro componente.

Contudo, isto não é recomendado. Nos componentes em que o Kirigami.FormData.isSection esteja configurado como verdadeiro, o texto da legenda fornecido na propriedade Kirigami.FormData.label deste componente será apresentada como o texto de cabeçalho da secção. Isto não se aplica a todos os componentes, daí a recomendação que use os componentes Kirigami.Separator ou Item nos locais em que gostaria de usar um texto de cabeçalho. Este texto de cabeçalho é maior que o texto das legendas normais, dando aos utilizadores uma pista visual agradável sobre o conteúdo da secção do formulário.

Kirigami.FormLayout {
    id: layout
    Layout.fillWidth: true

    Controls.TextField {
        Kirigami.FormData.label: "TextField 1:"
    }
    Controls.TextField {
        Kirigami.FormData.label: "TextField 2:"
    }
    Controls.TextField {
        Kirigami.FormData.label: "TextField 3:"
    }
    Kirigami.Separator {
        Kirigami.FormData.isSection: true
        Kirigami.FormData.label: "New Section!"
    }
    ColumnLayout {
        Kirigami.FormData.label: "Radio buttons"
        Controls.RadioButton {
            text: "Radio 1"
            checked: true
        }
        Controls.RadioButton {
            text: "Radio 2"
        }
        Controls.RadioButton {
            text: "Radio 3"
        }
    }
    Item {
        Kirigami.FormData.isSection: true
        Kirigami.FormData.label: "Another Section! (lineless though)"
    }
    Controls.TextField {
        Kirigami.FormData.label: "TextField 4:"
    }
    Controls.TextField {
        Kirigami.FormData.label: "TextField 5:"
    }
    Controls.TextField {
        Kirigami.FormData.label: "TextField 5:"
    }
}
Um FormLayout com secções

Filhos com marcações

Uma funcionalidade útil do Kirigami.FormLayout é que poderá adicionar opções de marcação aos seus filhos. Isto poderá ser útil em páginas de configuração, onde poderá querer que o utilizador active ou desactive uma dada configuração, assim como fornecer mais informações extra sobre essa configuração, como por exemplo num campo de texto.

Kirigami.FormLayout {
    id: layout
    Layout.fillWidth: true

    Controls.TextField {
        Kirigami.FormData.label: "First name:"
    }
    Controls.TextField {
        Kirigami.FormData.label: "Middle name:"
        Kirigami.FormData.checkable: true
        enabled: Kirigami.FormData.checked
    }
    Controls.TextField {
        Kirigami.FormData.label: "Last name:"
    }
}
Um FormLayout ou um filho com opção de marcação

Forçar um formato para computador ou dispositivo móvel

Se preferir que a disposição do seu formulário fique consistente, independentemente do ambiente da sua aplicação, poderá usar a propriedade wideMode do componente Kirigami.FormLayout. O wideMode é uma propriedade booleana:

  • Quando for configurada como verdadeira, a disposição do formulário ficará estruturada como se estivesse num formato amplo e optimização para computadores (em duas colunas)
  • Se for falso, a disposição do formulário ficará estruturada num formato para dispositivos móveis (única coluna)
Kirigami.FormLayout {
    id: layout
    Layout.fillWidth: true
    wideMode: false

    Controls.TextField {
        Kirigami.FormData.label: "TextField 1:"
    }
    Controls.TextField {
        Kirigami.FormData.label: "TextField 2:"
    }
    Controls.TextField {
        Kirigami.FormData.label: "TextField 3:"
    }
}
Um FormLayout com o formato para dispositivos móveis forçado