Qt 界面样式设计 | 个人笔记

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

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

1.1.5. QPushButton

QPushButton 的独特的样式如下：

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

1.1.6. QScrollBar

设置水平滚动条：

“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);}”

设置勾选框勾选时鼠标点击状态下的效果

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)}");          // 设置表格单元格