Este artículo aborda la configuración de estilos para el widget QDateEdit y su calendario emergente en Qt, centrándose en la modificación mediante hojas de estilo (QSS) y código C++.
Estilización de QDateEdit
El widget QDateEdit admite personalización básica a través de hojas de estilo. A continuación, se muestra un ejemplo donde se alteran los colores de fondo y texto en estados normales y enfocados.
/* Estilo base para QDateEdit */
QDateEdit {
background-color: rgba(50, 150, 200, 0.9);
color: rgba(255, 255, 255, 1);
padding: 4px;
}
/* Estilo al interactuar con QDateEdit */
QDateEdit:focus {
border: 2px dashed rgba(0, 200, 100, 0.7);
background-color: rgba(60, 160, 210, 1);
}
Este código aplica un fondo azul claro y texto blanco por defecto, con un borde verde discontinuo al enfocar el control.
Personalización del QCalendarWidget
El calendario emergente de QDateEdit se basa en QCalendarWidget, compuesto por múltiples sub-controles. Su diseño requiere selectores específicos para elementos como la vista de días, la barra de navegación y los botones de mes.
/* Fondo de la vista de días */
#mi_calendario_vista {
background-color: rgba(20, 80, 160, 0.85);
font-family: Arial;
font-size: 14px;
}
/* Alternativa para filas alternas en la vista */
QCalendarWidget QTableView {
alternate-background-color: rgba(20, 80, 160, 0.85);
color: rgba(255, 255, 255, 1);
}
/* Barra de navegación superior */
QCalendarWidget QWidget#navegacion_calendario {
background-color: rgba(10, 50, 120, 1);
padding: 5px;
}
/* Botón para mes anterior */
QCalendarWidget QToolButton#boton_mes_anterior {
qproperty-icon: url(:/icons/icono_izquierda.png);
min-width: 30px;
}
/* Botón para mes siguiente */
QCalendarWidget QToolButton#boton_mes_siguiente {
qproperty-icon: url(:/icons/icono_derecha.png);
min-width: 30px;
}
/* Días activos del mes actual */
QCalendarWidget QAbstractItemView:enabled {
font-size: 16px;
color: rgb(255, 255, 255);
selection-background-color: rgb(100, 100, 200);
selection-color: rgb(255, 255, 0);
}
/* Días de otros meses */
QCalendarWidget QAbstractItemView:disabled {
color: rgba(150, 150, 150, 0.7);
}
En este ejemplo, los identificadores como #mi_calendario_vista corresponden al nombre de objeto configurado en el widget. Es posible definir colores personalizados para fines de semana mediante código C++:
QTextCharFormat formato_sabado = widgetCalendario->weekdayTextFormat(Qt::Saturday);
formato_sabado.setForeground(QBrush(Qt::cyan, Qt::SolidPattern));
widgetCalendario->setWeekdayTextFormat(Qt::Saturday, formato_sabado);
QTextCharFormat formato_domingo = widgetCalendario->weekdayTextFormat(Qt::Sunday);
formato_domingo.setForeground(QBrush(Qt::magenta, Qt::SolidPattern));
widgetCalendario->setWeekdayTextFormat(Qt::Sunday, formato_domingo);
Este código aplica colores cian y magenta a los nombres de sábado y domingo, respectivamente, mejorando la visibilidad en el calendario.