Estilo Material

El estilo Material se basa en las directrices de diseño Material de Google. Más...

Propiedades adjuntas

• accent: color
• fondo: color
• elevación: int
• primer plano: color
• primario: color
• tema: enumeración
• roundedScale: enumeración
• containerStyle: enumeración

Métodos adjuntos

• color color(enumeración predefinida, enumeración tono)

Descripción detallada

El estilo Material se basa en las directrices de diseño Material de Google. Permite una experiencia unificada en todas las plataformas y tamaños de dispositivo.

Para ejecutar una aplicación con el estilo Material, consulte Uso de estilos en Qt Quick Controls.

Personalización

El estilo Material admite varios atributos personalizables. Algunos de estos atributos propagate a los hijos de la misma manera que fonts:

• tema
• primario
• acento
• primer plano
• fondo

El resto de atributos no se propagan a los hijos:

• elevación
• roundedScale
• containerStyle

En el siguiente ejemplo, la ventana y los tres botones de radio aparecen en el tema oscuro utilizando un color de acento púrpura:

import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Material

ApplicationWindow {
    visible: true

    Material.theme: Material.Dark
    Material.accent: Material.Purple

    Column {
        anchors.centerIn: parent

        RadioButton {
            text: qsTr("Small")
        }
        RadioButton {
            text: qsTr("Medium")
            checked: true
        }
        RadioButton {
            text: qsTr("Large")
        }
    }
}

Además de especificar los atributos en QML, también es posible especificar algunos de ellos mediante variables de entorno o en un archivo de configuración. Los atributos especificados en QML tienen prioridad sobre todos los demás métodos.

Fichero de configuración

Consulte Qt Quick Controls Archivo de configuración para obtener más información sobre el archivo de configuración.

Variables de entorno

Consulte Variables de entorno compatibles en Qt Quick Controls para ver la lista completa de variables de entorno compatibles.

Dependencia

El estilo Material debe importarse por separado para poder acceder a los atributos específicos del estilo Material. Debe tenerse en cuenta que, independientemente de las referencias al estilo Material, el mismo código de aplicación se ejecuta con cualquier otro estilo. Los atributos específicos de Material sólo tienen efecto cuando la aplicación se ejecuta con el estilo Material.

Si el estilo Material se importa en un archivo QML que se carga siempre, el estilo Material debe desplegarse con la aplicación para poder ejecutar la aplicación independientemente del estilo con el que se ejecute la aplicación. Mediante el uso de selectores de archivo, se pueden aplicar ajustes específicos de estilo sin crear una dependencia dura a un estilo.

Colores de material predefinidos

Aunque el primario y el acento pueden ser cualquiera color, se recomienda utilizar uno de los colores predefinidos que han sido diseñados para funcionar bien con el resto de la paleta de estilos Material:

Colores predefinidos disponibles:

Cuando se utiliza el tema oscuro, se utilizan por defecto diferentes tonos de los colores predefinidos:

Tonos predefinidos

Hay varios tonos diferentes de cada color predefinido que se pueden pasar a la función Material.color():

Véase también Estilo básico, Estilo universal

Variantes

El estilo Material también admite una variante densa, en la que los controles como botones y delegados tienen una altura menor y utilizan tamaños de fuente más pequeños. Se recomienda utilizar la variante densa en plataformas de escritorio, donde el ratón y el teclado permiten una interacción más precisa y flexible con el usuario.

Para utilizar la variante densa, establezca la variable de entorno QT_QUICK_CONTROLS_MATERIAL_VARIANT en Dense, o especifique Variant=Dense en el archivo qtquickcontrols2.conf. El valor por defecto en ambos casos es Normal.

Las siguientes imágenes ilustran las diferencias entre algunos de los controles cuando se utilizan las variantes normal y densa:

Tenga en cuenta que las alturas mostradas pueden variar en función de las diferencias en los tipos de letra de las distintas plataformas.

Notas específicas sobre los controles

Área de texto

TextArea soporta dos containerStyles: Filled y Outlined. Las áreas de texto con contorno tienen un texto flotante que se sitúa en la parte superior del control. Esto requiere que el texto del marcador de posición salga de los límites del control, lo que puede hacer que se recorte cuando el TextArea o el Flickable del que es hijo establece clip a true. Para evitar esto, topInset se establece en un valor apropiado en estos casos.

Según las directrices de Material, el texto del marcador de posición debe ser corto y no ocupar varias líneas.

Campo de texto

El mismo problema de recorte explicado anteriormente para TextArea también puede ocurrir con TextField. Para evitarlo, topInset se ajusta a un valor apropiado cuando TextField ajusta el clip a true.

De acuerdo con las directrices de Material, el texto del marcador de posición debe ser breve y no ocupar varias líneas.

Documentación de propiedades adjuntas

Esta propiedad adjunta contiene el color de acento del tema. La propiedad puede adjuntarse a cualquier ventana o elemento. El valor se propaga a los hijos.

El valor por defecto es Material.Pink.

En el siguiente ejemplo, el color de acento del botón resaltado se cambia a Material.Orange:

Button {
    text: qsTr("Button")
    highlighted: true
    Material.accent: Material.Orange
}

Esta propiedad adjunta contiene el color de fondo del tema. La propiedad puede adjuntarse a cualquier ventana o elemento. El valor se propaga a los hijos.

El valor por defecto es específico del tema (claro u oscuro).

En el siguiente ejemplo, el color de fondo del botón se cambia a Material.Teal:

Button {
    text: qsTr("Button")
    highlighted: true
    Material.background: Material.Teal
}

Esta propiedad adjunta contiene la elevación del control. Cuanto mayor sea la elevación, más profunda será la sombra. La propiedad puede ser adjuntada a cualquier control, pero no todos los controles visualizan la elevación. El valor no se propaga a los controles hijos.

El valor por defecto es específico del control.

En el siguiente ejemplo, la elevación del panel se establece en 6 para conseguir el aspecto de una tarjeta elevada:

Pane {
    width: 120
    height: 120

    Material.elevation: 6

    Label {
        text: qsTr("I'm a card!")
        anchors.centerIn: parent
    }
}

Esta propiedad adjunta contiene el color de primer plano del tema. La propiedad puede adjuntarse a cualquier ventana o elemento. El valor se propaga a los hijos.

El valor por defecto es específico del tema (claro u oscuro).

En el siguiente ejemplo, el color de primer plano del botón es Material.Pink:

Button {
    text: qsTr("Button")
    Material.foreground: Material.Pink
}

Esta propiedad adjunta contiene el color primario del tema. La propiedad puede adjuntarse a cualquier ventana o elemento. El valor se propaga a los hijos.

El color primario se utiliza como color de fondo de ToolBar por defecto.

El valor por defecto es Material.Indigo.

Esta propiedad adjunta indica si el tema es claro u oscuro. La propiedad puede adjuntarse a cualquier ventana o elemento. El valor se propaga a los hijos.

Temas disponibles:

Si se establece el tema en System, se elige el tema claro u oscuro en función de los colores del tema del sistema. Sin embargo, cuando se lee el valor de la propiedad theme, el valor nunca es System, sino el tema actual.

En el siguiente ejemplo, el tema del panel y del botón es Material.Dark:

Pane {
    Material.theme: Material.Dark

    Button {
        text: qsTr("Button")
    }
}

Esta propiedad adjunta contiene el radio de las esquinas redondeadas utilizadas en el control destino. La propiedad puede ser adjuntada a cualquier ventana o ítem, pero sólo algunos controles la soportan. El valor no se propaga a los controles hijos.

El valor por defecto es específico del control.

Escalas disponibles:

Esta propiedad se añadió en Qt 6.5.

Véase también: Material Style: Forma.

Esta propiedad adjunta contiene el estilo del contenedor utilizado por el control destino. La propiedad puede adjuntarse a cualquier ventana o elemento, pero sólo TextField y TextArea lo soportan por defecto. El valor no se propaga a los hijos.

El valor por defecto es específico del control.

Estilos disponibles:

Esta propiedad se añadió en Qt 6.5.

Véase también: Estilo de Material: Text Field Containers.

Documentación del método adjunto

Este método adjunto devuelve el valor efectivo del color del Material predefinido especificado combinado con el tono dado. Si se omite, el argumento shade es por defecto Material.Shade500.

Rectangle {
    color: Material.color(Material.Red)
}

Información relacionada

• Estilización Qt Quick Controls