Form layouts

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 själva. 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 Layout komponenter 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.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:"
            }
        }
    }
}

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 inte det. För komponenter där Kirigami.FormData.isSection är inställd till true, visas beteckningen och texten som tillhandahålls för komponentens egenskap Kirigami.FormData.label som sektionens sidhuvudtext.

Sidhuvudtexten är större än normal beteckningstext och tillhandahåller användare med en snygg visuell ledtråd om vad formulärets layoutsektion handlar om.

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

Markeringsbara underliggande objekt

En praktisk funktion i Kirigami.FormData.isSection ä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 {
    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:"
    }
}

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 :

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

Justera beteckningar

Det finns tillfällen då du vill att en beteckning ska tilldelas till komponenter som har mer än en rad eller till en lista med komponenter. Det kan uppnås genom att placera Kirigami.FormData.label i [ColumnLayout](https://doc.qt.io/qt-6/qml-qtquick-layouts- columnlayout.html), som du kanske har märkt i Sektioner och avskiljare. Normalt är beteckningen placerad vertikalt mitt i layouten, vilket inte alltid är önskvärt. Vi kan ändra det med hjälp av Kirigami.FormData.labelAlignment .

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

Att ställa in beteckningens justering är särskilt bekvämt för att hantera komponenter eller listor över komponenter vars storlek du inte känner till i förväg. Elisa är ett mycket bra exempel på det:

Vi kan göra någonting liknande med en Javascript ternär 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
        }
    }
}