Dispositions de formes

Créez facilement des zones d'interaction attrayantes avec des dispositions de formulaires de Kirigami.

Les composants « Kirigami.FormLayout » vous permettent de créer facilement des formulaires, conformes aux directives de l'interface utilisateur de KDE. Ils sont optimaux pour les paramètres des boîtes de dialogue et pour les grands groupes de contrôles et de champs de saisie liés les uns aux autres.

Lorsqu'ils disposent de suffisamment d'espace, les dispositions de formulaire s'organisent en deux colonnes. La colonne de gauche sera occupée par les étiquettes des composants fils du formulaire, tandis que la colonne de droite sera occupée par les fils eux-mêmes. Dans les fenêtres où l'espace est plus restreint (ou sur les mobiles), les formulaires seront constitués d'une seule colonne verticale, les étiquettes des composants fils étant placées au-dessus de leur composant correspondant.

Forme simple

Les composants « Kirigami.FormLayout » sont similaires dans leur utilisation aux composants QtQuick Layout tels que « ColumnLayout » ou « RowLayout ». Les composants fils seront automatiquement disposés en fonction de la taille disponible pour la disposition du formulaire.

Les fils d'un objet « Kirigami.FormLayout » ont une propriété nommée « Kirigami.FormData.label ». Cette propriété vous permet de définir l'étiquette à fournir au composant fils en question.

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:"
        }
    }

}
Une disposition simple de formulaire

Sections et séparateurs

Les objets « FormLayouts » peuvent également être divisés en sections. Définir où commence une section est aussi simple que de définir à la valeur « True » de l'objet « Kirigami.FormData.isSection » d'un composant fils. Cela fournira au composant une marge supplémentaire en haut pour délimiter le début de la nouvelle section.

Les composants « Kirigami.Separator » sont les mieux adaptés pour démarrer de nouvelles sections. Un objet « Kirigami.Separator » dessinera une fine ligne horizontale, délimitant la fin d'une section. Si vous ne souhaitez pas qu'une ligne soit tracée entre les sections, vous pouvez utiliser une propriété QML « Item » standard. Alternativement, vous pouvez également utiliser la propriété « Kirigami.FormData.isSection » sur tout autre composant.

Toutefois, cela n'est pas recommandé. Sur les composants où « Kirigami.FormData.isSection » est positionné à la valeur « True », le texte de l'étiquette fourni pour la propriété « Kirigami.FormData.label » de ce composant s'affichera comme le texte d'en-tête de la section. Ceci ne s'applique pas à tous les composants, d'où la recommandation d'utiliser les composants « Kirigami.Separator » ou « Item » aux endroits où vous souhaitez utiliser un texte d'en-tête. Ce texte d'en-tête est plus grand que le texte normal de l'étiquette et donne aux utilisateurs un bon indice visuel de l'objet de la section de mise en page du formulaire.

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:"
    }
}
Une disposition de formulaire avec des sections

Fils à cocher

Une fonctionnalité pratique de l'objet « Kirigami.FormLayout » est que vous pouvez ajouter des cases à cocher à ses fils. Cela peut être utile dans les pages de configuration où vous souhaitez laisser l'utilisateur activer ou désactiver un paramètre, tout en lui demandant de fournir des informations supplémentaires dans un composant tel qu'un champ de texte.

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:"
    }
}
Une disposition de formulaire avec un fil pouvant être coché

Application forcée d'une mise en page pour bureau ou mobile

Si vous préférez que la mise en page du formulaire reste cohérente quel que soit l'environnement de votre application, vous pouvez utiliser la propriété « wideMode » du composant « Kirigami.FormLayout ». La propriété « wideMode » est booléenne :

  • Lorsque la valeur « True » est attribuée, la mise en page du formulaire sera structurée de manière optimisée pour les ordinateurs de bureau à écran large (en double colonne).
  • Lorsqu'elle est définie à « Faux », la mise en page du formulaire sera structurée selon une mise en page pour mobile (une seule colonne).
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:"
    }
}