Personalización de Qt Widgets mediante hojas de estilo

Cuando se utilizan hojas de estilo, cada widget se trata como una caja con cuatro rectángulos concéntricos: el rectángulo de margen, el rectángulo de borde, el rectángulo de relleno y el rectángulo de contenido. El modelo de caja describe esto con más detalle.

El modelo de caja

Los cuatro rectángulos concéntricos aparecen conceptualmente como se indica a continuación:

• El margen queda fuera del borde.
• El borde se dibuja entre el margen y el relleno.
• El relleno cae dentro del borde, entre el borde y el contenido real.
• El contenido es lo que queda del widget o subcontrol original una vez que hemos eliminado el margen, el borde y el relleno.

Por defecto, las propiedades margin, border-width y padding son cero. En ese caso, los cuatro rectángulos (margin, border, padding, y content) coinciden exactamente.

Puede especificar un fondo para el widget utilizando la propiedad background-image. Por defecto, la imagen de fondo se dibuja sólo para el área dentro del borde. Esto puede cambiarse usando la propiedad background-clip. Puedes usar background-repeat y background-origin para controlar la repetición y el origen de la imagen de fondo.

Una imagen de fondo no se adapta al tamaño del widget. Para proporcionar una "piel" o fondo que escale junto con el tamaño del widget, se debe utilizar border-image. Dado que la propiedad border-image proporciona un fondo alternativo, no es necesario especificar una background-image cuando se especifica border-image. En el caso de que se especifiquen ambas, border-image se dibuja sobre background-image.

Además, se puede utilizar la propiedad image para dibujar una imagen sobre la imagen de borde. La imagen especificada no se mosatiza ni se estira y cuando su tamaño no coincide con el tamaño del widget, su alineación se especifica utilizando la propiedad image-position. A diferencia de background-image y border-image, se puede especificar un SVG en la propiedad image, en cuyo caso la imagen se escala automáticamente según el tamaño del widget.

Los pasos para renderizar una regla son los siguientes:

• Establecer el clip para toda la operación de renderizado (border-radius)
• Dibujar el fondo (background-image)
• Dibujar el borde (border-image, border)
• Dibujar la imagen superpuesta (imagen)

Subcontroles

Un widget se considera como una jerarquía (árbol) de subcontroles dibujados unos encima de otros. Por ejemplo, el QComboBox dibuja el subcontrol desplegable seguido del subcontrol flecha abajo. Un QComboBox se representa de la siguiente manera:

• Renderiza la regla QComboBox { }
• Renderiza la regla QComboBox::drop-down { }
• Renderiza la regla QComboBox::down-arrow { }

Los subcontroles comparten una relación padre-hijo. En el caso de QComboBox, el padre de la flecha descendente es el desplegable y el padre del desplegable es el propio widget. Los subcontroles se posicionan dentro de su padre utilizando las propiedades subcontrol-position y subcontrol-origin.

Una vez posicionados, los subcontroles pueden estilizarse utilizando el modelo de caja.