c++ - una - ¿Cómo puedo crear un botón de estado personalizado de 3 estados?

graficos en c++

Question

Necesito crear un botón personalizado que tendrá 3 imágenes de fondo diferentes correspondientes a los siguientes estados:

• normal
• ratón sobre
• ratón hacia abajo

Me gustaría tener un QHBoxLayout con 3 partes para el lado izquierdo, el lado derecho y el lado medio (lado de estiramiento) para el botón.

Dentro del tamaño mediano, me gustaría tener una etiqueta para mostrar el texto.

Necesito este botón para tener un evento "hecho clic" también.

He estado buscando mucho para lograr esto, pero estoy realmente perdido. Intenté muchas cosas, incluido el widget personalizado de QWidget o el estilo de QPushButton con hojas de estilo, pero no logré tener 3 imágenes para 3 estados de mouse y el evento cliqueado.

Estoy buscando ayuda.

Answer 1

Bueno, primero, debe tener 3 imágenes para 3 estados, y luego puede usar la función setStyleSheet .

QPushButton *btn = new QPushButton;
btn->setStyleSheet("QPushButton{background:url(:/Resources/pause_nor.png);border:0px;}"
        "QPushButton:hover{background:url(:/Resources/pause_over.png);border:0px}"
        "QPushButton:pressed{background:url(:/Resources/pause_over.png); position: relative;top: 1px; left: 1px;}");

Answer 2

Puede usar la propiedad border-image , componiendo una sola imagen para cada estado como este:

| | Left Image | Middle Image | Right Image | |

luego especificando los tamaños de imagen izquierda y derecha como los tamaños de corte de borde y en los anchos de borde de la hoja de estilo. Por ejemplo, si las imágenes correctas tuvieran 25 píxeles de ancho y la izquierda 20, tendría:

QPushButton {
    border-image: url(:/normal.png) 0 25 0 20 stretch stretch; 
    border-width:0 25 0 20; /* without it, only the middle images would show */
}
QPushButton:hover { 
    border-image: url(:/hover.png) 0 25 0 20 stretch stretch;
}
QPushButton:pressed { 
    border-image: url(:/pressed.png) 0 25 0 20 stretch stretch;
}

Los valores representan la distancia entre los lados superior, derecho, inferior e izquierdo de la imagen.