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 propios 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
import QtQuick.Layouts
import QtQuick.Controls as Controls
import org.kde.kirigami 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:"
}
}
}
}
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.
Kirigami.Separator components are best suited for starting new sections. Separators are used to draw a thin horizontal line, demarcating the end of a section. If you would rather not have a line drawn between sections, you can use a standard QML Item property. Alternatively you could use the Kirigami.FormData.isSection property on any other component.
However, this is not recommended. On components where Kirigami.FormData.isSection is set to true
, the label text provided for this component's Kirigami.FormData.label property will be displayed as the section's header text.
Advertencia
Esto no se aplica a todos los componentes, de ahí la recomendación de que use los componentes Kirigami.Separator o Item en los lugares donde desee usar un texto de cabecera.Este texto de encabezado es más grande que el texto de etiqueta normal y proporciona al usuario una buena pista visual sobre de qué trata la sección de diseño del formulario.
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:"
}
}
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 {
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:"
}
}
Forzar un diseño de escritorio o móvil
If you would rather have your form layout stay consistent regardless of your application's environment, you can use the wideMode property of the Kirigami.FormLayout component:
- 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 {
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:"
}
}
Alineación de etiquetas
There are instances when you want a label to be assigned to components that have more than one line or to a list of components. This can be achieved by putting the Kirigami.FormData.label in the ColumnLayout, as you might have noticed in Sections and Separators. By default the label is positioned in the vertical center of the layout, which is not always desirable. We can change this with help of 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
}
}
}
Setting the label alignment is particularly convenient to manage components or lists of components whose size you do not know beforehand. Elisa is a very good example of this:
Podemos hacer algo similar a esto con un operador ternario de JavaScript:
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
}
}
}