Formulärlayouter

Kirigami.FormLayout komponenter gör det enkelt för dig att skapa formulär som uppfyller KDE:s Human Interface Guidelines. De är optimala för inställningsdialogrutor och för stora grupper av kontroller och inmatningsfält som är relaterade till varandra.

När tillräckligt utrymme tillhandahålls, upptar formulärlayouter två kolumner. Kolumnen till vänster upptas av beteckningarna tillhandahållna för formulärets underliggande komponenter, medan den högra upptas av själva de underliggande komponenterna. I mer utrymmesbegränsade fönster (eller på en mobil), består formulär av en enda vertikal kolumn med de underliggande komponenternas beteckningar placerade ovanför deras respektive komponent.

Enkelt formulär

Kirigami.FormLayout komponenter har liknande användning som QtQuick layoutkomponenter såsom ColumnLayout eller RowLayout. De underliggande komponenterna arrangeras automatiskt enligt storleken tillgänglig för formulärlayouten.

Underliggande komponenter till Kirigami.FormLayout har en egenskap som heter Kirigami.FormData.label. Egenskapen låter dig ange beteckningen som tillhandahålls för den underliggande komponenten i fråga.

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

}

Sektioner och avskiljare

En FormLayout kan också delas upp i sektioner. Att ange var en sektion börjar är så enkelt som att ställa in en underliggande komponents Kirigami.FormData.isSection till true. Det ger komponenten en del extra marginal längst upp för att avgränsa början på den nya sektionen.

Kirigami.Separator komponenter är bäst lämpade att börja nya sektioner. En Kirigami.Separator ritar en tunn horisontell linje, som avgränsar slutet på en sektion. Om du hellre inte vill att en linje ska ritas mellan sektioner, kan du använda den vanliga QML- egenskapen Item. Som alternativ skulle du kunna använda egenskapen Kirigami.FormData.isSection med vilken annan komponent som helst.

Dock rekommenderas det inte. För komponenter där Kirigami.FormData.isSection är inställt till true, visas beteckningens text som tillhandahålls för komponentens Kirigami.FormData.label visas som sektionsrubrikens text. Det gäller inte för alla komponenter, sålunda rekommenderas att du använder komponenten Kirigami.Separator eller Item på ställen där du vill använda en rubriktext. Rubriktexten är större än den normala beteckningstexten, och tillhandahåller användarna med en trevlig visuell ledtråd om vad formulärlayoutens sektion handlar om.

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

Markeringsbara underliggande objekt

En praktisk funktion i Kirigami.FormLayout är att du kan lägga till kryssrutor för dess underliggande objekt. Det kan vara användbart för inställningssidor där du kan vilja att användaren aktiverar eller inaktiverar en inställning, och dessutom vill att användaren tillhandahåller någon extra information i en komponent, såsom ett textfält.

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

Tvinga skrivbords- eller mobillayout

Om du hellre vill att din formulärlayout ska förbli konsekvent oberoende av programmets omgivning, kan du använda egenskapen wideMode i komponenten Kirigami.FormLayout. wideMode är en Boolesk egenskap:

• När den är inställd till true, struktureras formulärlayouten för en skrivbordsoptimerad bred (med dubbla kolumner) skärmlayout.
• När den är inställd till false, struktureras formulärlayouten som en mobillayout (enstaka kolumn)

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