Cómo cambiar el estilo de un QComboBox en PyQt5

Answer

1. 

   davy.ai

   July 24, 2023 at 3:04 pm

   Sí, es posible cambiar el estilo de lista desplegable de un QComboBox en PyQt5 utilizando CSS. Aquí hay algunas propiedades de CSS que se pueden utilizar para cambiar la barra de desplazamiento, el color del elemento seleccionado, el borde y otros estilos:

   • QComboBox::drop-down: Este pseudo-elemento selecciona el botón de flecha desplegable en el QComboBox, y se puede utilizar para cambiar su color de fondo, tamaño y otras propiedades.
   • QComboBox::down-arrow: Este pseudo-elemento selecciona el icono de flecha que se muestra en el botón desplegable, y se puede utilizar para cambiar su color, tamaño y otras propiedades.
   • QComboBox QAbstractItemView: Este selector apunta al QAbstractItemView que aparece cuando se hace clic en el QComboBox, y se puede utilizar para cambiar el color de fondo, la fuente, el borde y otras propiedades de los elementos de la lista.
   • QComboBox::item: Este selector apunta a los elementos individuales en la lista desplegable, y se puede utilizar para cambiar su color, relleno y otras propiedades.
   • QComboBox::item:selected: Esta pseudo-clase apunta al elemento actualmente seleccionado en la lista desplegable, y se puede utilizar para cambiar su color de fondo, color de primer plano y otras propiedades.
   • QComboBox::indicator: Este selector apunta al casillero o botón de opción que aparece al lado de cada elemento en la lista desplegable, y se puede utilizar para cambiar su color, tamaño y otras propiedades.
   • QComboBox::indicator:checked: Esta pseudo-clase apunta al casillero o botón de opción que aparece al lado del elemento actualmente seleccionado en la lista desplegable, y se puede utilizar para cambiar su color, tamaño y otras propiedades.

   Para aplicar estos estilos, puedes crear una hoja de estilos en un archivo .qss separado o en tu código de Python, y utilizar el método setStyleSheet del widget QComboBox para aplicar la hoja de estilos. Por ejemplo:

   combo_box = QComboBox()
   combo_box.setStyleSheet('''
       QComboBox {
           border: 2px solid red;
           padding: 2px;
           background-color: white;
           selection-background-color: blue;
           selection-color: white;
       }
       QComboBox::drop-down {
           background-color: gray;
       }
       QComboBox::down-arrow {
           image: url("down_arrow.png");
           width: 20px;
           height: 20px;
       }
       QComboBox QAbstractItemView {
           background-color: white;
           border: 1px solid gray;
       }
       QComboBox::item {
           padding: 2px 5px;
           border: 1px solid white;
       }
       QComboBox::item:selected {
           background-color: blue;
           color: white;
       }
       QComboBox::indicator {
           width: 20px;
           height: 20px;
           background-color: white;
           border: 1px solid gray;
           border-radius: 3px;
       }
       QComboBox::indicator:checked {
           background-color: blue;
           border: 1px solid white;
       }
   ''')
   

   Esta hoja de estilos cambiará el borde, el color de fondo y el color del elemento seleccionado del QComboBox, así como el color de fondo y el borde de la lista desplegable. También agregará un ícono de flecha personalizado al botón desplegable, y ajustará el tamaño y el estilo de las casillas de verificación/botones de opción en la lista.

   Ten en cuenta que algunas propiedades como el estilo de la barra de desplazamiento pueden requerir una personalización adicional más allá de lo mostrado aquí. Es posible que necesites utilizar otros pseudo-elementos y selectores CSS, o crear una subclase de la clase QStyle para crear un estilo personalizado para el QComboBox.

Comments are closed.