Estilo Imagine

El estilo Imagine se basa en activos de imagen configurables. Más...

Propiedades adjuntas

• ruta: cadena

Descripción detallada

El estilo Imagine se basa en activos de imagen. El estilo viene con un conjunto de imágenes por defecto, pero las imágenes se pueden cambiar fácilmente proporcionando un directorio con imágenes utilizando una convención de nomenclatura predefinida.

El estilo Imagine con las imágenes por defecto

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

Nombres de archivos

Los archivos de imagen se nombran utilizando la siguiente convención:

<control>-<element>-<states>

Las secciones <control> y <element> son obligatorias, pero la sección <states> es opcional. Por ejemplo, si se proporciona un único archivo llamado "button-background.9.png" para Button, se utilizará para todos los estados que admita Button. Corresponde al desarrollador decidir el conjunto de estados para los que proporcionará imágenes. Sin embargo, se recomienda proporcionar imágenes para los estados de control más comunes siempre que sea posible, como disabled, pressed, etc. Esto garantizará que los controles interactivos se comporten visualmente como el usuario final espera que lo hagan.

Elemento Referencia

La siguiente tabla enumera los elementos que admite cada control, junto con los posibles estados de ese elemento y la extensión de archivo que espera. Un elemento es una imagen que representa una determinada parte visual del control. Por ejemplo, Button's "background" elemento representa su background.

Ejemplos de activos

La siguiente tabla enumera ejemplos de activos (tomados de los activos por defecto del estilo Imagine) para todos los controles. La lista no es exhaustiva, ya que no todos los elementos necesitan activos, pero puede utilizarse como guía para crear sus propios activos.

La plantilla desde la que se exportaron estos recursos está disponible como proyecto Sketch.

¹ Una imagen 1x1 que contiene un color, estirada para llenar el control.

Imágenes de 9 parches

El estilo Imagine utiliza imágenes de 9 parches para que los diseñadores puedan controlar cómo responde un elemento concreto al cambiar su tamaño. A continuación se muestra un ejemplo de una imagen de 9 parches que representa un Button's background, junto con una versión ampliada (para que sea más fácil ver las líneas de 9 parches):

El contenido de la imagen mide 44 píxeles de ancho por 32 de alto. Cada imagen de 9 parches necesita una línea de un píxel de grosor (denominadas colectivamente "líneas de 9 parches") alrededor de cada lado, por lo que el tamaño real de la imagen pasa a ser de 46 píxeles de ancho por 34 píxeles de alto. Tenga en cuenta que las líneas de 9 parches deben tener un grosor de un píxel, independientemente de los PPP de la imagen. Por ejemplo, las líneas de 9 parches de button-background.9.png y button-background@2x.9.png deben tener un grosor de un píxel.

Las líneas de 9 parches deben ser negras, y las áreas restantes deben ser transparentes o blancas:

Áreas estirables

Las líneas de 9 parches en los bordes superior e izquierdo determinan qué partes de la imagen se estiran cuando se redimensiona.

A continuación se muestran ejemplos de la imagen de 9 parches redimensionada a una vez y media su tamaño original en varias dimensiones:

Observe cómo las esquinas redondeadas mantienen su tamaño original, ya que están fuera del alcance de las líneas.

Áreas de relleno

Las líneas de 9 parches en los bordes derecho e inferior determinan cuánto espacio hay disponible para el control contentItem, lo que significa que también puede pensarse que controla el padding. Para ver un diagrama que ilustra el relleno, consulte Control Layout.

Abajo hay más ejemplos de la imagen 9-patch siendo redimensionada, pero esta vez demostrando cómo funcionan las líneas 9-patch de relleno.

contentItem puede ocupar todo el espacio que necesite dentro de las zonas sombreadas. Si se omiten las líneas de relleno, el contentItem ocupará todo el espacio que necesite sin sobrepasar las áreas estirables.

Áreas insertables

En algunos casos es necesario que un control tenga una sombra paralela, por ejemplo. Sin embargo, si añadiéramos una sombra al botón de arriba, afectaría a su tamaño, lo que presenta problemas tanto para el diseño como para los límites de entrada del ratón/toque.

Las áreas de inserción solucionan este problema indicando al control que una determinada área de la imagen de 9 parches debe quedar fuera del control:

En la imagen de abajo, la línea discontinua representa el área del botón en la que se puede hacer clic, así como el espacio que ocupará en un diseño. La sombra está marcada por la zona rayada que hay detrás:

Exportar imágenes 9-Patch

Se pueden utilizar varios editores vectoriales y de mapas de bits para crear imágenes de 9 parches adecuadas para su uso con el estilo Imagine. Las siguientes secciones explican brevemente el proceso de exportación para cada editor, y la última sección explica cómo asegurarse de que las imágenes exportadas son conformes con 9-patch.

Diseñador Affinity

Consulte la documentación Configuración de exportación de Affinity.

Adobe Illustrator

Consulte la documentación del panel Exportación de activos de Adobe.

Adobe Photoshop

Consulte la documentación de Adobe Generar activos de imagen a partir de capas.

Inkscape

La extensión de exportación Inkscape 9-Patch puede utilizarse para exportar activos con Inkscape.

Sketch

Vea la documentación de Exportación de Sketch.

Qt Quick Controls también proporciona un plugin para Sketch que corrige automáticamente el grosor de las líneas de 9 parches después de exportar los activos. Para instalar este archivo, haga doble clic en él. Una vez que Sketch haya confirmado que se ha instalado el plugin de exportación 9-patch, el plugin procesará automáticamente las imágenes cuando se exporten.

Corregir las líneas del 9-Patch

Al exportar imágenes de 9 parches en diversas variantes de PPP (@2x, @3x, etc.), las líneas de 9 parches se escalarán normalmente junto con la imagen. Hay varias formas de solucionar esto, pero quizás la más sencilla sea utilizar la herramienta mogrify de ImageMagick. La herramienta tiene una función -shave que se puede utilizar para recortar la imagen y reducir el grosor de las líneas de 9 parches:

mogrify -shave 1x1 -path path/to/images *@2x.9.png
mogrify -shave 2x2 -path path/to/images *@3x.9.png
mogrify -shave 3x3 -path path/to/images *@4x.9.png

Las imágenes con PPP normales (las que no tienen el prefijo @Nx ) no se ven afectadas, por lo que sólo es necesario ejecutar el comando en imágenes destinadas a pantallas con PPP altos.

Imágenes animadas

Los formatos de imagen animada WebP y GIF son compatibles con el estilo Imagine.

Personalización

Ruta

El estilo Imagine permite personalizar la ruta que se utiliza para hacer la selección de activos de imagen. La ruta puede especificarse para cualquier ventana o elemento, y se propaga automáticamente a los hijos de la misma manera que fonts. En el siguiente ejemplo, la ventana y los tres botones de opción aparecen con activos de imagen oscuros (archivos que se encuentran en "qrc:/themes/dark").

import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Imagine

ApplicationWindow {
    visible: true

    Imagine.path: "qrc:/themes/dark"

    Column {
        anchors.centerIn: parent

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

Además de especificar la ruta en QML, también es posible especificarla mediante una variable 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

[Imagine]
Path=:/imagine-assets

[Imagine]
Path=imagine-assets

Consulte Qt Quick Controls Configuration File para obtener más detalles sobre el archivo de configuración.

Variables de entorno

QT_QUICK_CONTROLS_IMAGINE_PATH=:/imagine-assets

QT_QUICK_CONTROLS_IMAGINE_PATH=imagine-assets

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

Paleta

El estilo Imagine admite la personalización de la paleta mediante la propiedad palette y el archivo qtquickcontrols2.conf. Al igual que ocurre con otros estilos, la dirección palette roles exacta que utiliza el estilo Imagine depende del estilo. Sin embargo, como la mayor parte de la apariencia visual de los controles (por ejemplo: fondos) se gestionan a través de activos de imagen, sólo las funciones que se utilizan normalmente para el texto tendrán efecto.

Fuente

Las fuentes personalizadas pueden establecerse mediante la propiedad font y el archivo de configuración.

Dependencia

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

Si el estilo Imagine se importa en un archivo QML que se carga siempre, el estilo Imagine debe desplegarse con la aplicación para poder ejecutarla 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 rígida a un estilo.

Véase también Estilos Qt Quick Controls

Documentación de propiedades adjuntas

Esta propiedad adjunta contiene la ruta a los activos de imagen...

Button {
    Imagine.path: "qrc:/themes/dark"
}

Informaciones relacionadas

• Estilismo Qt Quick Controls
• Ejemplo de automoción