QT QCalendarWidget 样式小结

QCalendarWidget 是一个由多个组件组成的控件，如果需要对其进行qss美化，只要对其内部使用的组件进行样式设置，接下来我们只需要找出它的界面元素即可，代码如下：

void Widget::dumpStructure(const QObject *obj, int spaces)
{
    qDebug() << QString("%1%2 : %3")
                .arg("", spaces)
                .arg(obj->metaObject()->className())
                .arg(obj->objectName());

    QObjectList list = obj->children();
    for (auto v : list) {
        dumpStructure(v, spaces + 4);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

在构造函数中添加需要打印的日历：dumpStructure(ui->calendarWidget, 0);

QCalendarWidget 界面元素：

"QCalendarWidget : calendarWidget"
"    QVBoxLayout : "
"    QCalendarModel : "
"    QCalendarView : qt_calendar_calendarview"
"        QWidget : qt_scrollarea_viewport"
"        QWidget : qt_scrollarea_hcontainer"
"            QScrollBar : "
"            QBoxLayout : "
"        QWidget : qt_scrollarea_vcontainer"
"            QScrollBar : "
"            QBoxLayout : "
"        QStyledItemDelegate : "
"        QHeaderView : "
"            QWidget : qt_scrollarea_viewport"
"            QWidget : qt_scrollarea_hcontainer"
"                QScrollBar : "
"                QBoxLayout : "
"            QWidget : qt_scrollarea_vcontainer"
"                QScrollBar : "
"                QBoxLayout : "
"            QItemSelectionModel : "
"        QHeaderView : "
"            QWidget : qt_scrollarea_viewport"
"            QWidget : qt_scrollarea_hcontainer"
"                QScrollBar : "
"                QBoxLayout : "
"            QWidget : qt_scrollarea_vcontainer"
"                QScrollBar : "
"                QBoxLayout : "
"            QItemSelectionModel : "
"        QTableCornerButton : "
"        QItemSelectionModel : "
"    QWidget : qt_calendar_navigationbar"
"        QPrevNextCalButton : qt_calendar_prevmonth"
"        QPrevNextCalButton : qt_calendar_nextmonth"
"        QToolButton : qt_calendar_monthbutton"
"            QMenu : "
"                QAction : "
"                QAction : "
"                QAction : "
"                QAction : "
"                QAction : "
"                QAction : "
"                QAction : "
"                QAction : "
"                QAction : "
"                QAction : "
"                QAction : "
"                QAction : "
"                QAction : "
"        QToolButton : qt_calendar_yearbutton"
"        QSpinBox : qt_calendar_yearedit"
"            QLineEdit : qt_spinbox_lineedit"
"                QWidgetLineControl : "
"            QValidator : qt_spinboxvalidator"
"        QHBoxLayout : "
"    QCalendarDelegate : "
"    QCalendarTextNavigator : "
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

QCalendarWidget 样式：

QCalendarWidget QWidget#qt_calendar_navigationbar {
    background-color: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #EBEEF6, stop:1 #FAFAFA);
    border: 1px solid #d1d2d3;
}

QCalendarWidget QToolButton#qt_calendar_monthbutton:hover {
    color: #343536;
}

QCalendarWidget QToolButton#qt_calendar_yearbutton:hover {
    color: #343536;
}

QCalendarWidget QToolButton#qt_calendar_calendarview {
    background-color: #ff4588;
}

QCalendarWidget QToolButton {
    background-color: transparent;
    border: none;
    border-radius: 10px;
    min-width: 60px;
    min-height: 60px;
    width: 120px;
    height: 60px;
    color: #666666;
    font-size: 24px;
    icon-size: 50px, 50px;
}

QCalendarWidget QToolButton#qt_calendar_prevmonth {
    background-color: transparent;
    width: 62px;
    height: 66px;
    icon-size: 62px, 66px;
    qproperty-icon: url(:/image/arrow_prev.png);
}
QCalendarWidget QToolButton#qt_calendar_prevmonth:hover,
QCalendarWidget QToolButton#qt_calendar_prevmonth:pressed {
    qproperty-icon: url(:/image/arrow_prev_hover.png);
}

QCalendarWidget QToolButton#qt_calendar_nextmonth {
    background-color:transparent;
    width: 62px;
    height: 66px;
    icon-size: 62px, 66px;
    qproperty-icon: url(:/image/arrow_next.png);
}
QCalendarWidget QToolButton#qt_calendar_nextmonth:hover,
QCalendarWidget QToolButton#qt_calendar_nextmonth:pressed{
    qproperty-icon: url(:/image/arrow_next_hover.png);
}

QCalendarWidget QMenu {
    width: 120px;
    left: 20px;
    color: #666666;
    font-size: 18px;
    background-color: #f1f2f3;
}

QCalendarWidget QSpinBox {
    width: 120px;
    min-width: 120px;
    max-width: 120px;
    font-size: 28px;
    color: #666666;
    background-color: #f1f2f3;
    selection-background-color: rgb(136, 136, 136);
    selection-color: rgb(255, 255, 255);
}

QCalendarWidget QSpinBox::up-button {
    subcontrol-origin: border;
    subcontrol-position: top right;
    width: 30px;
    height: 28px;
}

QCalendarWidget QSpinBox::up-button:hover {
    subcontrol-origin: border;
    subcontrol-position: top right;
    image: url(:/image/box_up_hover.svg);
    width: 30px;
    height: 28px;
}

QCalendarWidget QSpinBox::down-button {
    subcontrol-origin: border;
    subcontrol-position: bottom right;
    width: 30px;
    height: 28px;
}

QCalendarWidget QSpinBox::down-button:hover {
    subcontrol-origin: border;
    subcontrol-position: bottom right;
    image: url(:/image/box_down_hover.svg);
    width: 30px;
    height: 28px;
}

QCalendarWidget QSpinBox::up-arrow {
    width: 28px;
    height: 28px;
    image: url(:/image/box_up.svg);
}

QCalendarWidget QSpinBox::down-arrow {
    width: 28px;
    height: 28px;
    image: url(:/image/box_down.svg);
}

/* 星期几 */
QCalendarWidget QWidget {
    alternate-background-color: rgb(237, 240, 244);
}

/* 属于当前月份日期 */
QCalendarWidget QAbstractItemView:enabled {
    font-size: 22px;
    color: rgb(66, 66, 66);
    background-color: rgb(237,240,244);
    selection-background-color: rgb(128, 128, 128);
    selection-color: rgb(0, 225, 0);
}

/* 非当前月份的日期 */
QCalendarWidget QAbstractItemView:!enabled {
    font-size: 22px;
    color: rgb(168, 168, 168);
    background-color: rgb(237, 240, 244);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135

QCalendarWidget 效果图：