La hoja de estilo de Qt está inspirada principalmente en CSS. Al llamar a QWidget::setStyleSheet() o QApplication::setStyleSheet() , puede especificar una hoja de estilo para un subwidget individual, la ventana completa o incluso la aplicación completa. Una hoja de estilo consta de reglas de estilo que afectan al dibujo de los widgets. Estas reglas son texto sin formato. Dado que la hoja de estilo se analiza en tiempo de ejecución, puede intentar diseñar diferentes aplicaciones Qt personalizando la hoja de estilo.
1. Explicación de términos profesionales (10)
1.1, selector selector
El selector es para seleccionar una clase específica, generalmente una clase Qt que puede personalizar la hoja de estilo, a veces es una clase ya veces son varias clases.
1,2, controlador auxiliar de subcontrol
La palabra controlador auxiliar existe en relación con el selector. Se puede entender que hemos seleccionado un componente, y este diseño se compone de varios componentes. Es posible que deba separarse nuevamente y debe configurarse mediante el controlador auxiliar del indicador ::. Algunos controles solo tienen estos atributos.
Como se muestra en la figura a continuación, es una barra de progreso. Cuando desee embellecerla con el estilo azul de la figura a continuación, hay tres partes, una es el borde, la otra es el número de porcentaje y la otra es el color interior Necesita ser operado por un controlador auxiliar;
1.3, estado de pseudo-estados
Además de ayudar en la separación de los controladores de un widget, las hojas de estilo también pueden configurar ventanas de acuerdo con los estados individuales de los widgets.
Como se muestra en la figura a continuación, cuando el mouse está sobre el botón, el color es gris, y cuando se presiona, es blanco. A esto se le llama el estado. Por ejemplo, cuando el mouse está sobre, es hover, cuando se selecciona, se comprueba, etc.
1.4 Propiedades
Es una característica y propiedad inherente de un widget, y cada widget tendrá sus propias propiedades. Como ancho, alto, etc.
1.5, valor
El número después del atributo, por ejemplo, si la altura se establece en 200, entonces debería ser altura: 200
1.6,! lógico no
A veces, cuando configuramos los atributos de un determinado estado, queremos configurarlo en algunos estados que no son (!) al mismo tiempo. En este momento, necesitamos usar (!) para seleccionar un determinado estado, como !marcado
1.7, el modelo de caja del modo de caja
Este modo especifica 4 rectángulos que afectan el diseño para dibujar un widget personalizado.
1. El rectángulo de contenido es el rectángulo más interno, donde dibuja el contenido del widget (como texto, imágenes).
2. El rectángulo de relleno rodea el rectángulo de contenido. Es responsable del relleno especificado por la propiedad de relleno. Principalmente la brecha entre el contenido del widget y el borde, se puede dimensionar con arriba, derecha, abajo e izquierda. 3. El rectángulo de borde rodea el rectángulo de relleno. Reserva espacio para los bordes. Se puede considerar como el marco exterior de la ventana. En el método de segmentación de gráficos que se describe a continuación, el borde se entiende como una región. Referencia 4. Aplicación avanzada: método de división Jiugongge 4. El rectángulo más externo del rectángulo de margen, que rodea el rectángulo del borde, es responsable del área en blanco del margen especificado, principalmente responsable de la distancia de otros widgets. Si no especifica cuatro de ellos, el valor predeterminado es que los cuatro se superponen.
1,8, ángulo en radianes
Los cuatro radianes de las esquinas del widget. radio establece el radián de la esquina, como border-radius:4px; el radián de la esquina es 4px. Como se muestra en la figura a continuación, el botón predeterminado se mantiene presionado y el botón redondeado a continuación se establece a través del atributo secundario.
1.9, color de fondo y color de primer plano
El color de primer plano del widget se usa para dibujar el texto sobre el widget, que se puede especificar mediante la propiedad de color.
El color de fondo utilizado para dibujar el rectángulo relleno del widget se puede especificar mediante la propiedad background-color.
La imagen de fondo se define mediante el atributo background-image , que se usa para dibujar la posición inicial de la imagen en las cuatro áreas especificadas por background-origin para mostrar en el modo de cuadro. La alineación y el mosaico de la imagen de fondo dentro del dominio del cuadro se pueden especificar con las propiedades background-position y background-repeat. Si la imagen de fondo especificada tiene un canal alfa (efecto de transparencia), el color especificado por background-color se mostrará a través del área transparente.
1.10, #
Especifique un botón, seguido del signo # es el nombre del objeto de la clase especificada. Como se muestra abajo:
