Formulierindeling

De componenten Kirigami.FormLayout maken het gemakkelijk voor u om formulieren te maken die zich conformeren aan de KDE Human Interface Guidelines. Ze zijn optimaal voor dialogen voor instellingen en voor grote groepen besturingselementen en invoervelden die bij elkaar horen.

Als er voldoende ruimte is, krijgen formulierindelingen twee kolommen. De linker kolom bevat de labels geleverd door de kindcomponenten van het formulier, terwijl het rechter de kinderen van het formulier zelf bevatten. Bij meer beperkte ruimte in het venster (of op een mobiel), zullen formulieren bestaan uit een enkele verticale kolom met kindcomponenten, terwijl labels geplaatst worden boven hun respectievelijke component.

Eenvoudig formulier

Kirigami.FormLayout componenten zijn in gebruik gelijk aan de QtQuick indelingscomponenten zoals ColumnLayout of RowLayout. De kindcomponenten zullen automatisch gearrangeerd worden volgens de grootte beschikbaar aan de formulierindeling.

Kinderen van een Kirigami.FormLayout hebben een eigenschap genaamd Kirigami.FormData.label. Deze eigenschap laat u het label instellen die geleverd zal worden voor de betreffende kindcomponent.

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

}

Secties en scheidingstekens

FormLayouts kunnen ook opgedeeld worden in secties. Instellen waar een sectie begint is net zo gemakkelijk als instellen van een kindcomponent van Kirigami.FormData.isSection op true. Dit zal de component leveren met enige extra marges bovenaan om het begin van de nieuwe sectie aan te geven.

Kirigami.Separator componenten zijn het best geschikt voor het beginnen van nieuwe secties. Een Kirigami.Separator zal een dunne horizontale lijn tekenen, die het einde van een sectie aangeeft. Als u liever geen lijn getekend tussen secties wilt hebben, dan kunt u een standaard QML Item eigenschap gebruiken. Alternatief zou u de eigenschap Kirigami.FormData.isSection kunnen gebruiken op elke andere component.

Dit is echter niet aanbevolen. Op componenten waar Kirigami.FormData.isSection is gezet op true, zal de labeltekst geleverd voor deze eigenschap Kirigami.FormData.label van de component getoond worden als de koptekst van de sectie. Dit is niet op elke component van toepassing, vandaar de aanbeveling dat u componenten Kirigami.Separator of Item gebruikt op plaatsen waar u een koptekst zou willen gebruiken. Deze koptekst is groter dan de normale labeltekst en levert gebruikers een mooie visuele aanwijzing over waar de formulierindelingssectie over gaat.

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

Activeerbare kinderen

Een handige functie van Kirigami.FormLayout is dat u keuzevakjes aan zijn kinderen kan toevoegen. Dit kan nuttig zijn op instellingspagina's waar u de gebruiker een instelling wilt laten in- of uitschakelen en ook de gebruiker enige extra informatie wilt leveren in een component zoals een tekstveld.

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

Een bureaublad- of mobielindeling afdwingen

Als u liever hebt dat uw formulierindeling consistent blijft onafhankelijk van de omgeving van uw toepassing, dan kunt u de eigenschap wideMode van de Kirigami.FormLayout component gebruiken. wideMode is een booleaanse eigenschap:

• Indien gezet op true, zal de formulierindeling gestructureerd zijn in een voor het bureaublad geoptimaliseerd indeling breed scherm (dubbele kolommen)
• Indien gezet op false, zal de formulierindeling gestructureerd zijn in een indeling voor een mobiel (enkele kolom)

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