Diseños de formulario

Los componentes Kirigami.FormLayout le facilitan la creación de formularios que se ajusten a las «Directrices de interfaces humanas de KDE». Son óptimos para los cuadros de diálogo de configuración y para grandes grupos de controles y campos de entrada que están relacionados entre sí.

Cuando se les proporciona suficiente espacio, los diseños de formularios ocuparán dos columnas. La columna de la izquierda estará ocupada con las etiquetas proporcionadas para los componentes secundarios del formulario, mientras que la derecha contendrá los elementos secundarios. En ventanas con espacio más limitado (o en dispositivos móviles), los formularios constarán de una sola columna vertical con las etiquetas de los componentes secundarios colocadas sobre sus respectivos componentes.

Formulario sencillo

El uso de los componentes Kirigami.FormLayout es similar al de los componentes de diseño de QtQuick, como ColumnLayout o RowLayout. Los componentes hijos se organizarán automáticamente según el espacio disponible para el diseño del formulario.

Los hijos de Kirigami.FormLayout tienen una propiedad llamada Kirigami.FormData.label. Esta propiedad le permite definir la etiqueta que se proporcionará a los componentes hijos en cuestión.

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

}

Secciones y separadores

Los formularios también se pueden dividir en secciones. Definir dónde empieza una sección es tan fácil como asignar el valor true a Kirigami.FormData.isSection de un componente hijo. Esto proporcionará un poco de margen adicional en la parte superior del componente para denotar el inicio de la nueva sección.

Los componentes Kirigami.Separator son más adecuados para iniciar nuevas secciones. Un Kirigami.Separator dibujará una fina línea horizontal para indicar el final de una sección. Si no desea dibujar esta línea entre las secciones, use la propiedad Item estándar de QML. De forma alternativa, puede usar la propiedad Kirigami.FormData.isSection de cualquier otro componente.

No obstante, esto no es recomendable. En los componentes donde Kirigami.FormData.isSection está definido como true, el texto de la etiqueta proporcionado por la propiedad Kirigami.FormData.label de dicho componente se mostrará como texto de cabecera de la sección. Esto no se aplica a todos los componentes, de ahí la recomendación de que use componentes Kirigami.Separator o Item en los lugares donde quiera usar un texto de cabecera. Este texto de cabecera es mayor que el texto de una etiqueta normal y proporciona al usuario una información agradable de lo que trata la sección del formulario.

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

Hijos con casillas de verificación

Una funcionalidad útil de Kirigami.FormLayout es que puede asignar casillas de verificación a sus hijos. Esto puede ser de utilidad en las páginas de preferencias donde quiera permitir que el usuario active o desactive una preferencia y también quiera que el usuario proporcione información adicional en un componente, como un campo de texto.

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

Forzar un diseño de escritorio o móvil

Si prefiere que el diseño de su formulario sea coherente sin tener en cuenta el entorno de su aplicación, puede usar la propiedad wideMode del componente Kirigami.FormLayout. wideMode es una propiedad booleana:

• Cuando vale true, el formulario se estructurará en formato de pantalla ancha optimizado para el escritorio (a doble columna)
• Cuando vale false, el formulario se organizará en un formato para móviles (a 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:"
    }
}