Form-aranĝoj

Kirigami.FormLayout komponantoj faciligas al vi krei formojn konformajn al la KDE-Homa Interfaco-Gvidlinioj. Ili estas optimumaj por agordaj dialogoj kaj por grandaj grupoj de regiloj kaj enigkampoj kiuj rilatas unu al la alia.

Se provizitaj per sufiĉe da spaco, formularaj aranĝoj okupos du kolumnojn. La kolumno maldekstre estos okupita de la etikedoj provizitaj por la infanaj komponantoj de la formo, dum la dekstre estos okupita de la infanaj komponantoj mem. En pli spac-limigitaj fenestroj (aŭ sur poŝtelefono), formoj konsistos el ununura vertikala kolumno kun la etikedoj de infankomponentoj metitaj super sia respektiva komponento.

Simpla formo

Kirigami.FormLayout komponantoj estas similaj en uzo al QtQuick Layout komponantoj kiel ColumnLayout aŭ [RowLayout](https://doc.qt.io/qt-6/qml-qtquick-layouts-rowlayout .html). La infanaj komponantoj estos aŭtomate aranĝitaj laŭ la grandeco disponebla al la formo-aranĝo.

Infanoj de Kirigami.FormLayout havas proprecon nomitan Kirigami.FormData.label . Ĉi tiu propreco ebligas al vi agordi la etikedon, kiu estos provizita por la koncerna infana komponanto.

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

Sekcioj kaj apartigiloj

FormLayouts ankaŭ povas esti dividitaj en sekciojn. Agordi kie sekcio komenciĝas estas tiel facila kiel agordi Kirigami.FormData.isSection de infana komponanto al vera. Ĉi tio provizos la komponanton per iom da ekstra marĝeno ĉe la supro por limi la komencon de la nova sekcio.

Kirigami.Separator komponantoj plej taŭgas por komenci novajn sekciojn. Apartigiloj etas uzataj por desegni maldikan horizontalan linion, limigante la finon de sekcio. Se vi preferus ne havi linion desegnita inter sekcioj, vi povas uzi norman QML Item proprecon. Alternative vi povus uzi la proprecon Kirigami.FormData.isSection ĉe iu ajn alia ero.

Tamen ĉi tio ne estas rekomendinda. Ĉe komponantoj kie Kirigami.FormData.isSection estas agordita al vera, la etikedo teksto provizita por la Kirigami.FormData.label de ĉi tiu komponanto ) propreco estos montrata kiel la kapteksto de la sekcio.

Ĉi tiu kaplinia teksto estas pli granda ol la normala etikeda teksto, kaj provizas uzantojn kun bela vida indiko pri kio temas la form-aranĝo.

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

Markeblaj infanoj

Praktika funkcio de Kirigami.FormLayout estas, ke vi povas aldoni markobutonojn al ĝiaj infanoj. Ĉi tio povas esti utila en agordaj paĝoj, kie vi eble volas lasi la uzanton ebligi aŭ malŝalti agordon, kaj ankaŭ volas, ke la uzanto disponigu kelkajn kromajn informojn en komponanto kiel tekstkampo.

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

Devigante labortablon aŭ moveblan aranĝon

Se vi preferas ke via formulararanĝo restu konsekvenca sendepende de la medio de via aplikaĵo, vi povas uzi la wideMode proprecon de la Kirigami.FormLayout komponento:

• Kiam agordita al "vera", la formo-aranĝo estos strukturita en labortabla optimumigita larĝekrana (du-kolumna) aranĝo
• Kiam agordita al "falsa", la formularenpaĝigo estos strukturita en movebla aranĝo (unu kolumno)

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

Vicigante viajn etikedojn

Estas okazoj, kiam vi volas, ke etikedo estu asignita al komponantoj, kiuj havas pli ol unu linion aŭ al listo de komponantoj. Ĉi tio povas esti atingita metante la Kirigami.FormData.label en la [ColumnLayout](https://doc.qt.io/qt-6/qml-qtquick-layouts- columnlayout.html), kiel vi eble rimarkis en Sekcioj kaj Apartigiloj. Defaŭlte la etikedo estas poziciigita en la vertikala centro de la aranĝo, kio ne ĉiam estas dezirinda. Ni povas ŝanĝi ĉi tion helpe de 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
        }
    }
}

Agordi la etikedan vicigon estas precipe oportuna por administri komponantojn aŭ listojn de komponantoj, kies grandecon vi ne scias antaŭe. Elisa estas tre bona ekzemplo de tio:

Ni povas fari ion similan al ĉi tio per JavaScript ternara operatoro:

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