Qt QDateEdit下拉日历的样式设计
QDateEdit样式设计
最近做了一个用到QDateEdit的项目,涉及到对这个控件进行设计的方面,对于我这个新手来说,我属实是有点摸不着头脑,这个嵌套了几层。但是还是在谷歌上找到了一些代码,解决了这些个问题,可能百度上有类似的东西,我也是copy的,但是我在百度上搜到的都就只是一个简简单单的代码,并没有任何的注释,导致摸不着头脑,所以就想自己来分享一下,也是对自己遇到的记录一下。
QDateEdit
这个的样式表设计比较简单
/* 这个是正常状态*/
QDateEdit
{
background-color: rgba(0,0,255,1);
color: rgba(255, 255, 255, 1);
}
/*这个是你选中的状态*/
QDateEdit:focus
{
border-color: rgba(255,0,0,1);
border-style: inset;
border-width: 5;
}
这个是样式表内容
这里是对QDateEdit的样式表部位分析
接下来是重头戏,
QCalendarWidget
在QDateEdit的下拉日历就是这个控件,这个控件是由其他一些控件组成的,所以比较复杂。我主要是参考了几个博文,在这里首先感谢。
QSS QCalendarWidget
Qt Forum
Stack overflow
这几个都帮助我从这个QCalendarWidget的泥潭里面走出来,挺感谢的。
下面是我的一些理解
这是样式表的代码
/*日历部分的背景颜色*/
#qt_calendar_calendarview {
background-color: rgba(10, 95, 189, 1);
font: 16px;
}
/*这是日历部分的另外一个写法*/
QCalendarWidget QTableView
{
alternate-background-color:rgba(10, 95, 189, 1); /* day name/week number background */
color: rgba(255,255,255,1);
}
/*这里是标题栏的样式*/
QCalendarWidget QWidget#qt_calendar_navigationbar
{
background-color: rgba(4, 51, 114, 1);
}
/*这是上一个月的箭头的样式*/
QCalendarWidget QToolButton#qt_calendar_prevmonth
{
qproperty-icon: url(:/images/images/B.png);
}
/*这里是下一个月的箭头的样式*/
QCalendarWidget QToolButton#qt_calendar_nextmonth
{
qproperty-icon: url(:/images/images/A.png);
}
/*这里是激活的日期的样式也就是当前这个月*/
QCalendarWidget QAbstractItemView:enabled
{
font-size:24px;
color: rgb(255, 255, 255);
/* 这里是你选择一个日期时的样式,包括背景和字体颜色
selection-background-color: rgb(64, 64, 64);
selection-color: rgb(0, 255, 0); */
}
/*这里是其他月份的样式*/
QCalendarWidget QAbstractItemView:disabled
{
color: rgb(64, 64, 64);
}
这个可以修改周末的颜色
QTextCharFormat format = calendarWidget->weekdayTextFormat(Qt::Saturday);
format.setForeground(QBrush(Qt::white, Qt::SolidPattern));
calendarWidget->setWeekdayTextFormat(Qt::Saturday, format);
下图是具体设计出来后的样式