1. Qt 界面样式设计
- 1.1. 控件样式设计
- 1.2. 参考资料

1. Qt 界面样式设计

1.1. 控件样式设计

改变控件的样式一般使用 setStyleSheet(“”) 函数，其可填参数如下：

参数	效果说明
“background-color: rgb(0, 0, 0);”	设置件的背景色为 QColor(0,0,0)
“background: url(:/img/label_bg.png);”	用图片填充控件
“color: rgb(255, 255, 255);”	设置控件的文本颜色为 QColor(255,255,255)
“font: bold 16px;”	设置控件中的文本字体为 16 号粗体
“border: 2px solid rgb(66, 169, 235);”	设置控件的边框宽度为 2px，颜色为 QColor(66,169,235)
“border-radius: 4px;”	设置控件的边角为圆角

以下仅对具体控件的特殊样式设计进行说明。

1.1.1. QLabel 样式

如果 style sheet 无法满足 QLabel 在应用的需求，可通过继承 QLabel 写自己新的 label 类。比如在 QLabel 的四个角画线，显示一种画框效果，可新建一个 MyQLabel 类，在类中重写 paintEvent(QPaintEvent *event) 函数即可。代码示例如下：

void MyQLabel::paintEvent(QPaintEvent *event)
{
    QLabel::paintEvent(event);          // 重要，先调用父类的 paintEvent() 为了显示原背景图像
    int width = this->width();
    int height = this->height();
    QPainter painter(this);
    painter.setPen(QPen(QColor(66,169,235), 3));

    painter.drawLine(QPointF(0, 0), QPointF(width/8, 0));           // 左上角横线
    painter.drawLine(QPointF(0, 0), QPointF(0, height/8));          // 左上角竖线

    painter.drawLine(QPointF(width, 0), QPointF(width*7/8, 0));           // 右上角横线
    painter.drawLine(QPointF(width, 0), QPointF(width, height/8));          // 右上角竖线

    painter.drawLine(QPointF(0, height), QPointF(width/8, height));           // 左下角横线
    painter.drawLine(QPointF(0, height), QPointF(0, height*7/8));          // 左下角竖线

    painter.drawLine(QPointF(width, height), QPointF(width*7/8, height));           // 右下角横线
    painter.drawLine(QPointF(width, height), QPointF(width, height*7/8));          // 右下角竖线
}

效果如下（图中的照片是一张背景图）：

1.1.2. QComboBox

参考链接：Qt Style Sheet实践（二）：组合框QComboBox的定制

1.1.3. QEditLine

一般用 QEditLine 控件实现搜索框。

query_button = new QPushButton();
query_button->setFixedWidth(50);
query_button->setCursor(Qt::PointingHandCursor);
query_button->setToolTip(tr("搜索"));
// query_button->setFlat(true);            // 实现按钮透明
query_button->setStyleSheet("QPushButton{background:url(:/button/button_search) center no-repeat; border: none;}");
query_edit = new QLineEdit();
query_edit->setFixedWidth(530);
query_edit->setPlaceholderText(tr("请输入要搜索的id"));
query_edit->setStyleSheet("background-color: rgb(29,33,41); color: rgb(255,255,255); height: 35px; border: 1px solid rgb(66,169,235); border-radius: 6px;");
QMargins margins = query_edit->textMargins();               // 设置文本与搜索框的边距，避免太靠近
query_edit->setTextMargins(margins.left(), margins.top(), query_button->width(), margins.bottom());
QHBoxLayout *query_edit_layout = new QHBoxLayout();         // 设置 query_edit 的布局
query_edit_layout->addStretch();
query_edit_layout->addWidget(query_button);
query_edit_layout->setSpacing(0);
query_edit_layout->setContentsMargins(0, 0, 5, 0);
query_edit->setTextMargins(8, 0, 0, 0);
query_edit->setLayout(query_edit_layout);

效果如下：

其他的样式设计可参考：Qt Style Sheet实践（四）：行文本编辑框QLineEdit及自动补全

1.1.4. QCheckbox

参数	效果说明
“QCheckBox::indicator {width: 20px; height: 20px;}”	设置勾选框的大小
“QCheckBox::indicator:unchecked {image: url(:/checkbox/unchecked);}”	设置勾选框未勾选时的效果
“QCheckBox::indicator:unchecked:hover {image: url(:/checkbox/unchecked_hover);}”	设置勾选框未勾选时鼠标悬浮状态下的效果
“QCheckBox::indicator:unchecked:pressed {image: url(:/checkbox/unchecked_press);}”	设置勾选框未勾选时鼠标点击状态下的效果
“QCheckBox::indicator:checked {image: url(:/checkbox/checked);}”	设置勾选框勾选时的效果
“QCheckBox::indicator:checked:hover {image: url(:/checkbox/checked_hover);}”	设置勾选框勾选时鼠标悬浮状态下的效果
“QCheckBox::indicator:checked:pressed {image: url(:/checkbox/checked_press);}”	设置勾选框勾选时鼠标点击状态下的效果

1.1.5. QPushButton

QPushButton 的独特的样式如下：

参数	效果说明
“QPushButton{background-color: rgb(66,169,235);}”	设置正常状态下 QPushButton 的背景色
“QPushButton:hover{background-color: rgb(60,195,245);}”	设置鼠标悬浮状态下 QPushButton 的背景色
“QPushButton:pressed{background-color: rgb(9,140,188);}”	设置鼠标点击状态下 QPushButton 的背景色

以上设置背景色的方法还可以改为设置图片，方法为：将 “background-color: rgb(66,169,235)” 改为 “border-image: url(:/pushbutton_normal.png)”

1.1.6. QScrollBar

设置水平滚动条：

table_widget->horizontalScrollBar()->setStyleSheet("QScrollBar:horizontal{background:rgb(32,36,45); padding-top:1px; padding-bottom:1px; padding-left:20px; padding-right:20px; border:1px solid rgb(38,42,53); height: 16px;}"       // 整体设置
                                                        "QScrollBar::handle:horizontal{background:rgb(47,53,66); border-radius: 6px; border: 1px solid rgb(32,36,45);}"        // 设置滚动条
                                                        "QScrollBar::hadnle:horizontal:hover{background:rgb(255,255,255); border-radius: 6px; border: none;}"       // 设置鼠标放到滚动条上的状态
                                                        "QScrollBar::add-line:horizontal{background:url(:/scrollbar/arrow_right) center on-repeat;}"        // 设置右箭头
                                                        "QScrollBar::sub-line:horizontal{background:url(:/scrollbar/arrow_left) center no-repeat;}");        // 设置左箭头

设置垂直滚动条：

table_widget->verticalScrollBar()->setStyleSheet("QScrollBar:vertical{background:rgb(32,36,45); padding-top:20px; padding-bottom:20px; padding-left:1px; padding-right:1px; border:1px solid rgb(38,42,53); width: 16px;}"       // 整体设置
                                                        "QScrollBar::handle:vertical{background:rgb(47,53,66); border-radius: 6px; border: none;}"        // 设置滚动条
                                                        "QScrollBar::hadnle:vertical:hover{background:rgb(255,255,255); border-radius: 6px; border: none;}"       // 设置鼠标放到滚动条上的状态
                                                        "QScrollBar::add-line:vertical{background:url(:/scrollbar/arrow_down) center on-repeat;}"        // 设置下箭头
                                                        "QScrollBar::sub-line:vertical{background:url(:/scrollbar/arrow_up) center no-repeat;}");        // 设置上箭头

QScrollBar 的一些样式属性说明：

1.1.7. QTableWidget

设置表格样式：

1
2
3

table_widget->setStyleSheet("selection-background-color: rgb(0, 120, 215)");        // 设置选中时的背景色
table_widget->setStyleSheet("QWidget{background-color: rgb(32,37,45)}"          // 设置普通状态下的背景色
            "QTableWidget::item{border-top: 1px solid rgb(38, 42, 53); border-bottom: 1px solid rgb(38, 42, 53)}");          // 设置表格单元格