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 de labels van kindcomponenten, die geplaatst worden boven hun respectievelijke component.

Eenvoudig formulier

Kirigami.FormLayout componenten zijn in gebruik gelijk aan de componenten QtQuick Layout zoals ColumnLayout of RowLayout. De kindcomponenten zullen automatisch gearrangeerd worden volgens de grootte beschikbaar in 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.15
import QtQuick.Layouts 1.15
import QtQuick.Controls 2.15 as Controls
import org.kde.kirigami 2.20 as Kirigami

Kirigami.ApplicationWindow {
    pageStack.initialPage: Kirigami.Page {

        Kirigami.FormLayout {
            anchors.fill: parent

            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. Scheidingen worden gebruikt om een dunne horizontale lijn te tekenen, die het einde van een sectie aangeeft. Als u liever geen lijn, getekend tussen secties, wilt hebben, dan kunt u een standaard QML-eigenschap Item 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 het label tekst geleverd voor deze eigenschap Kirigami.FormData.label getoond worden als de koptekst van de sectie.

Deze koptekst is groter dan de normale labeltekst en levert gebruikers met een nette visuele aanwijzing waar de sectie formulierindeling over gaat.

Kirigami.FormLayout {
    anchors.fill: parent

    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 {
    anchors.fill: parent

    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 component Kirigami.FormLayout gebruiken.

• 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 {
    anchors.fill: parent
    wideMode: false

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

Uw labels uitlijnen

Er zijn exemplaren wanneer u een label wilt toekennen aan componenten die meer dan één regel hebben of aan een lijst componenten. Dit kan bereikt worden door de Kirigami.FormData.label te stoppen in de ColumnLayout, zoals u zou kunnen hebben opgemerkt in Secties en scheidingstekens. Standaard is de label gepositioneerd in het verticale centrum van de indeling, wat niet altijd wenselijk is. We kunnen dit met hulp van Kirigami.FormData.labelAlignment wijzigen.

Kirigami.FormLayout {
    anchors.fill: parent

    ColumnLayout {
        Kirigami.FormData.label: "This is a label:"
        Kirigami.FormData.labelAlignment: Qt.AlignTop

        Controls.Label {
            text: "This is some rather long text \nthat should elide to multiple lines \nto show how the label gets aligned."
            elide: Text.elideLeft
        }
    }
}

De uitlijning van het label is speciaal handig om componenten te behandelen of lijsten componenten waarvan u de grootte van tevoren niet weet. Elisa is hier een erg goed voorbeeld van:

We kunnen hierbij iets soortgelijks doen met een JavaScript ternary-operator:

Kirigami.FormLayout {
    anchors.fill: parent

    ColumnLayout {
        Kirigami.FormData.label: "This is a label:"
        Kirigami.FormData.labelAlignment: labelText.text.lineCount > 1 ? Qt.AlignTop : Qt.AlignVCenter

        Controls.Label {
            id: labelText
            text: "This is some rather long text \nthat should elide to a new line \nso it appears below the Form Label."
            elide: Text.elideLeft
        }
    }
}