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