Disposicions de formulari
Els components d'una Kirigami.FormLayout
faciliten la creació de formularis que s'ajustin a les Directrius d'interfície humana del KDE. Són òptims per als diàlegs de configuració i per a grans grups de controls i camps d'entrada que estan relacionats entre si.
Quan se'ls proporciona prou espai, les disposicions de formulari ocuparan dues columnes. La columna de l'esquerra estarà ocupada per les etiquetes proporcionades pels components fills del formulari, mentre que la dreta estarà ocupada pels elements fills. En les finestres amb un més espai limitat (o en dispositius mòbils), els formularis consistiran en una sola columna vertical amb les etiquetes dels components fills col·locades a sobre dels seus respectius components.
Formulari senzill
Els components d'una Kirigami.FormLayout
són similars en ús als components de QtQuick Layout com ColumnLayout
o RowLayout
. Els components fills s'organitzaran automàticament d'acord amb la mida disponible per a la disposició del formulari.
Els fills d'una Kirigami.FormLayout
tenen una propietat anomenada Kirigami.FormData.label
. Aquesta propietat permet establir l'etiqueta que es proporcionarà per al component fill en qüestió.
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:"
}
}
}

Seccions i separadors
Les FormLayout també es poden dividir en seccions. Establir on comença una secció és tan fàcil com establir la Kirigami.FormData.isSection
d'un component fill a true
. Això proporcionarà al component un marge addicional a la part superior per a demarcar el començament de la secció nova.
Els components d'un Kirigami.Separator
són els més adequats per a començar seccions noves. Un Kirigami.Separator
dibuixarà una prima línia horitzontal, delimitant el final d'una secció. Si preferiu no traçar dita línia entre les seccions, podeu utilitzar una propietat Item
de QML estàndard. De manera alternativa, podeu utilitzar la propietat Kirigami.FormData.isSection
en qualsevol altre component.
Tot i això, no es recomana. En els components on Kirigami.FormData.isSection
s'estableix a true
, el text de l'etiqueta proporcionat per la propietat Kirigami.FormData.label
d'aquest component es mostrarà com el text de la capçalera de la secció. Això no s'aplica a tots els components, d'aquí la recomanació que utilitzeu els components del Kirigami.Separator
o Item
en els llocs on us agradaria emprar un text de capçalera. Aquest text de capçalera és més gran que el text d'etiqueta normal i proporciona als usuaris una bona pista visual del que tracta la secció de la disposició del formulari.
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:"
}
}

Fills seleccionables
Una característica útil d'una Kirigami.FormLayout
és que podeu afegir caselles de selecció als seus elements fills. Això pot ser útil en les pàgines de configuració, on és possiblement voldreu permetre que l'usuari habiliti o inhabiliti una opció de configuració, i també voldreu que l'usuari proporcioni informació addicional en un component com un camp de text.
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:"
}
}

Forçar una disposició d'escriptori o mòbil
Si preferiu que la disposició del formulari sigui coherent independentment de l'entorn on es trobi la vostra aplicació, podeu emprar la propietat wideMode
del component Kirigami.FormLayout
. wideMode
és una propietat booleana:
- Quan s'estableix a
true
, la disposició del formulari s'estructurarà en una disposició de pantalla ampla optimitzada per a l'escriptori (doble columna). - Quan s'estableix a
false
, la disposició del formulari s'estructurarà en una disposició per a un dispositiu mòbil (una sola columna).
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:"
}
}
