Qt之Qss的使用

最新推荐文章于 2024-08-19 00:03:50 发布

FlyWM_

最新推荐文章于 2024-08-19 00:03:50 发布

阅读量8.7k

点赞数 4

分类专栏： qt 文章标签： qt qss styleSheet

本文链接：https://blog.csdn.net/a844651990/article/details/82854090

版权

qt 专栏收录该内容

46 篇文章 26 订阅

订阅专栏

使用Qt美化控件时qss必不可少，本文记录各个控件如何使用qss进行美化，不定时更新。。。

QSlider

// 一定要先设置groove，不然handle的很多效果将没有
QSlider::groove:horizontal {
    border: none;
    height: 4px;
    background: red;
}
QSlider::handle:horizontal {
    border: none;
    margin: -5px 0px; // 上下边距和左右边距
    width: 14px;
    height: 14px;
    border-radius: 7px;
    background: #6495E0;
}
// 划过部分
QSlider::sub-page:horizontal {
    background: #6495E0;
    height: 4px;
}
// 未划过部分
QSlider::add-page:horizontal { 
    background: black; 
    height: 4px;
}

效果图：
在这里插入图片描述

QScrollBar

QScrollArea#musicMangeScrollArea {
    border: none;
    background-color: #f5f5f7;
}
QScrollBar:vertical {
    border: none;
    background: #f5f5f7;
    width: 10px;
    margin: 0px 0 0px 0;
}
QScrollBar::handle:vertical {
    background: Gainsboro;
    min-height: 20px;
    border-radius: 5px;
    border: none;
}
QScrollBar::add-line:vertical {
    border: 0px solid grey;
    background: #32CC99;
    height: 0px;
    subcontrol-position: bottom;
    subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical {
    border: 0px solid grey;
    background: #32CC99;
    height: 0px;
    subcontrol-position: top;
    subcontrol-origin: margin;
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
    background: none;
    width: 0px;
    height: 0px;
}

效果图：
在这里插入图片描述

QPushButton设置图片和文字位置

ui->pushButton->setObjectName("button");
ui->pushButton_2->setObjectName("button1");
ui->pushButton->setStyleSheet("QPushButton {"
                                "image-position: right center;"
                                "text-align: left;"
                                "padding-right: 10px;"
                                "image: url(:/555.png);"
                                "border: 1px solid #EDEDED;"
                                "border-radius: 13px;"
                                "background-color: gray;"
                                "font-family: \"Microsoft Yahei\";"
                                "color: #636363;"
                              "}");
ui->pushButton_2->setStyleSheet("QPushButton#button1 {"
                                "image-position: left center;"
                                "text-align: right;"
                                "padding-right: 10px;"
                                "image: url(:/555.png);"
                                "border: 1px solid #EDEDED;"
                                "border-radius: 13px;"
                                "background-color: gray;"
                                "font-family: \"Microsoft Yahei\";"
                                "color: #636363;"
                              "}");

效果：
在这里插入图片描述

QToolBox修改tab的高度

QToolBox::tab {
	color: red;
	background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
                                  stop: 0 #E1E1E1, stop: 0.4 #DDDDDD,
                                  stop: 0.5 #D8D8D8, stop: 1.0 #D3D3D3);
    border-radius: 5px;
}
QToolBox::tab:selected { /* italicize selected tabs */
	font: italic;
	color: green;
	height: 200px;
}
/* 主要是这里 */
QToolBox>QAbstractButton {
	min-height: 80px;
}