Postavitve obrazcev

Komponente Kirigami.FormLayout vam olajšajo ustvarjanje obrazcev, ki so skladni s smernicami uporabniškega vmesnika KDE. Optimalne so za pogovorna okna nastavitev in za velike skupine kontrolnikov in vnosnih polj, ki so povezana med seboj.

Če je na voljo dovolj prostora, bodo postavitve obrazcev privzele dva stolpca. Stolpec na levi bo zaseden z oznakami, ki so predvidene za sestavne dele obrazca za odvisne komponente, desnega pa bodo prevzeli sami odvisni deli. V oknih z več prostorske omejitve (ali na mobilnih napravah) bodo obrazci sestavljeni iz enega navpičnega stolpca z oznakami za odvisne komponente, ki so nameščene nad njihovo ustrezno komponento.

Enostavna oblika

Komponente Kirigami.FormLayout so v uporabi podobne komponentam QtQuick Layout, kot so ColumnLayout](https://doc.qt.io/qt-6/qml-qtquick-layouts-columnlayout.html) ali RowLayout. Odvisne komponente bodo samodejno razporejene glede na velikost, ki je na voljo za postavitev obrazca.

Odvisne komponente Kirigami.FormLayout imajo nastanitev z imenom Kirigami.FormData.label . S to lastnostjo lahko nastavite oznako, ki bo zagotovljena za zadevno odvisno komponento.

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

Odseki in ločila

FormLayouts lahko razdelite tudi na odseke. Nastavitev, kjer se začne odsek, je tako preprosta, kot je nastavitev dela podrejene komponente Kirigami.FormData.isSection na true. To bo komponenti zagotovilo nekaj dodatnega roba na vrhu, da razmeji začetek novega odseka.

Komponente Kirigami.Separator so najprimernejše za začetek novih odsekov. Ločila so uporabljena za risanje tanke črte, ki označuje konec sekcije. Če raje nimate narisanih črt med sekcijami, lahko uporabite lastnost standardne QML postavke Item . Alternativno lahko uporabite lastnost Kirigami.FormData.isSection na katerikoli drugi komponenti.

Vendar to ni priporočljivo. Na komponentah kjer je Kirigami.FormData.isSection postavljeno na true, bo dano besedilo oznake za to komponento Kirigami.FormData.label prikazano kot besedilo glave te sekcije.

To besedilo glave je večje od običajnega besedila oznak in uporabnikom omogoča lepo vizualno iztočnico o razdelku in postavitvi obrazca.

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

Podrejeni, ki jih je mogoče odkljukati

Priročna zmožnost Kirigami.FormLayout je, da lahko dodate potrditvena polja svojim odvisnim delom. To je lahko uporabno na straneh z nastavitvami, na katerih boste morda želeli dovoliti uporabniku omogočiti ali onemogočiti nastavitev, poleg tega pa želite, da uporabnik v komponenti, kot je polje z besedilom, zagotovi nekaj dodatnih informacij.

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

Vsiljena namizna ali mobilna postavitev

Če želite, da postavitev obrazca ostane skladna ne glede na okolje aplikacije, lahko uporabite lastnost wideMode komponente Kirigami.FormLayout :

• Ko je nastavljena na 'true', bo postavitev obrazca strukturirana v postavitvi širokega zaslona (dvojnega stolpca) z optimizacijo namizja
• Ko je nastavljena na 'false', bo postavitev obrazca strukturirana v mobilni postavitvi (en stolpec)

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

Poravnava oznak

Obstajajo primeri, ko želite, da je oznaka dodeljena komponentam, ki imajo več vrstic ali na seznam komponent. To je mogoče doseči z dajanjem Kirigami.FormData.label v ColumnLayout, kar ste lahko opazili v Sections and Separators. Oznaka je privzeto nameščena v navpičnem središču postavitve, kar ni vedno zaželeno. To lahko spremenimo s pomočjo 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
        }
    }
}

Nastavitev poravnave nalepke je še posebej priročna za upravljanje komponent ali seznamov komponent, katerih velikost vnaprej ne poznate. Elisa je zelo dober primer tega:

Lahko naredimo nekaj podobnega s ternarnim operatorjem v JavaScriptu:

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