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, desno 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' 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.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:"
        }
    }

}

Odseki in ločila

FormLayouts lahko razdelite tudi na odseke. Nastavitev, kjer se začne odsek, je tako preprosta, kot je nastavitev resničnega dela podrejene komponente »Kirigami.FormData.isSection«. 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čilo »Kirigami.Separator« bo narisalo tanko vodoravno črto, ki bo razmejila konec odseka. Če raje ne bi imeli črte med odseki, lahko uporabite standardno lastnost QML »Item«. Poleg tega lahko uporabite lastnost »Kirigami.FormData.isSection« na poljubni drugi komponenti.

Vendar pa to ni priporočljivo. V komponentah, kjer je »Kirigami.FormData.isSection« nastavljeno na true, bo besedilo oznake, ki je določeno za lastnost »Kirigami.FormData.label« te komponente, prikazano kot besedilo glave odseka. To ne velja za vsako komponento, zato je priporočilo, da uporabljate komponente »Kirigami.Separator« ali »Item« na mestih, kjer želite uporabiti besedilo glave. To besedilo glave je večje od običajnega besedila oznake in uporabnikom zagotavlja lepo vizualno iztočnico o tem, o čem gre v razdelku postavitve obrazca.

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

Podrejeni, ki jih je mogoče odkljukati

Priročna funkcija '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 {
    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:"
    }
}

Vsiljena namizna ali mobilna postavitev

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

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