qt -- 常用的qss样式总结

目录

设置背景颜色

圆角

进度条：QProgressbar

滑动条 ：QSlider

滚动条：QScrollBar

常用样式： 

单选框 

QLabel 

QHeaderView  

 QTableView

 QTreeWidget

 QListWidget

 QComboBox 

 QPushButton

QToolButton

 QGroupBox

 QTextEdit

 QDoubleSpinBox/QSpinBox

---

使用outline，移除QWidget焦点的所有边框
QWidget:focus
 {
    outline: none;
}
QFrame,QWidget 
{
    border: none;
}

设置QToolButton，QPushButton的图标及图标大小：

1、通过qproperty-iconSize来设置ICON的尺寸；   2、通过qproperty-icon:来设置ICON

qproperty-iconSize: 16px 16px;

qproperty-icon:url(:/png/close.png);

设置背景颜色

设置背景透明：

//设置背景透明
this->setAttribute(Qt::WA_TranslucentBackground, true);
//设置透明度  透明度取值范围：0.0（全透明） - 1.0（不透明），默认值为1.0
setWindowOpacity(0.5);  

/***************************qss*****************/
//qss中编写
background-color: rgba(194, 194, 194, 50%);
//背景为图片时不重复  background-repeat:no-repeat 不平铺
background: url(:/png/png/resetIcon.png) no-repeat left;
​​//背景透明
background-color:transparent
//背景渐变
background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 rgb(124, 124, 124), stop: 1.0 rgb(72, 71, 71));

​

在构造函数添加：

setAutoFillBackground(true);//必须有这条语句
setPalette(QPalette(QColor(250,250,200)));

窗体背景为黑色：

QPalette palette(this->palette());
palette.setColor(QPalette::Background, Qt::black);
this->setPalette(palette);

使用paintEvent函数绘制背景：

void MainWindow::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    painter.drawPixmap( 0, 0, this->width(), this->height(), 
                  QPixmap(":/jpg/background.jpg") );
}

//绘制透明效果
void MainWindow::paintEvent(QPaintEvent *e)
{

    QPainter painter(this);
    // QColor最后一个参数90代表alpha通道，一般用作透明度
    painter.fillRect(this->rect(), QColor(0, 0, 0, 90));   90：透明度
    QWidget::paintEvent(e);
}

在Linux中使用按钮时样式《出现问题》：

//使用这两个没有边框和背景色（黑色）
background-color:transparent;
border:none;

//使用rgb的话会有背景
background-color:rgb();

在linux中出现边框：
    使用border：none;若border不能解决则可以使用：outline：none;

圆角

border-top-right-radius:33px;
border-bottom-right-radius:33px;

-------------------------------
//圆形
border-radius:33px;

进度条：QProgressbar

 

QProgressBar {
    border: 1px solid;
    border-color: #000000 transparent transparent #000000;
    background-color: #f5f5f5;
}
QProgressBar::chunk {
    border: none;
}
QProgressBar::chunk[state=inRange] {
    background-color:  #00ff00;
}
QProgressBar::chunk[state=outRange] {
    background-color:  #e52f14;
}
QProgressBar::chunk[state=outRangeLittle] {
    background-color:  #ffc000;
}

滑动条 ：QSlider

       

图一：

/**
    groove表示槽的部分
    handle表示滑块
    add-page表示未滑过的槽部分
    sub-page表示已滑过的槽部分
    在辅助控制器后面可以设置状态，horizontal就是QSS生效的QSlider的状态
**/
//设置线条的圆角
QSlider::groove:horizontal
{
    height:10px;
    border-radius: 5px;
    background-color:rgb(219,219,219);
}
/*
设置的是滑块的形状：圆形
*/
QSlider::handle:horizontal
{
    width: 20px;
    background-color:rgb(255,255,255);
    margin:-6px 0px -6px 0px; //控制对应高度
    border: 1px solid gray;
    border-radius:10px;
}
/*
add-page
sub-page
滑动时出现的颜色样式
*/
QSlider::add-page:horizontal
{
    border-radius: 5px;
    background-color: rgb(219,219,219);
}

QSlider::sub-page:horizontal
{
    border-radius: 5px;
    background-color: rgb(80,166,234);
}

图二： 

QSlider::groove:horizontal {
        height: 6px;
        background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 rgb(124, 124, 124), stop: 1.0 rgb(72, 71, 71));
}
QSlider::handle:horizontal {
        width: 1px;
        background: rgb(0, 160, 230);
        margin: -6px 0px -6px 0px;
        border-radius: 9px;
}

/*

qlineargradient
//其中x1,y1表示渐变起始坐标, x2,y2表示渐变终点坐标
//如果只有x相等,则表示垂直线性渐变,如果只有y相等,则表示平行线性渐变,否则就是斜角线性渐变
*/

QSlider::groove:vertical
{
    height:150px;
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 rgb(124, 124, 124), 
                stop: 1.0 rgb(72, 71, 71));
}
QSlider::handle:vertical
{
    width: 10px;
    background: rgb(0, 160, 230);
    margin: -6px 0px -6px 0px;
    border-radius: 9px;
}

QSlider 
{
    background-color: transparent;
    border: none;
    height: 40px;
}
QSlider::groove:horizontal 
{
    background-color: rgb(164, 217, 240);
    height: 24px;
}
QSlider::handle:horizontal 
{
    background-color: rgb(255, 0, 0);
    height: 40px;
    width: 30px;
    border: none;
    border-radius: 4px;
    margin: -20px 0px; /* 上下空白 -20px, 左右空白 0px */
}
QSlider::handle:horizontal:hover
 {
    background-color: rgb(200, 100, 50);
}
QSlider::sub-page:horizontal 
{
    background-color: rgb(0, 223, 0);
}

 

滚动条：QScrollBar

        如果想实现滚动的话，可以自定义事件实现滚动效果，主要就是对坐标的运用。

        

/**********滚动条-水平**********/
QScrollBar:horizontal 
{
        height: 20px;
        background: transparent;
        margin-top: 3px;
        margin-bottom: 3px;
}
QScrollBar::handle:horizontal 
{
        height: 20px;
        min-width: 30px;
        background: #cdcdcd;
        margin-left: 15px;
        margin-right: 15px;
}
QScrollBar::handle:horizontal:hover 
{
        background: #a6a6a6;
}
QScrollBar::sub-line:horizontal 
{
        width: 15px;
        background: transparent;
        image: url(:/res/left_arrow.png);
        subcontrol-position: left;
}
QScrollBar::add-line:horizontal 
{
        width: 15px;
        background: transparent;
        image: url(:/res/right_arrow.png);
        subcontrol-position: right;
}
QScrollBar::sub-line:horizontal:hover 
{
        background: rgb(170, 200, 230);
}
QScrollBar::add-line:horizontal:hover 
{
        background: rgb(170, 200, 230);
}
QScrollBar::add-page:horizontal,QScrollBar::sub-page:horizontal 
{
        background: transparent;
}

/**********滚动条-垂直**********/
QScrollBar:vertical 
{
    width: 20px;
    background: transparent;
    padding-top: 15px;
    padding-bottom: 15px;
    margin-left: 3px;
    margin-right: 3px;
}
QScrollBar::handle:vertical 
{
    width: 20px;
    min-height: 30px;
    background: #cdcdcd;
}
QScrollBar::handle:vertical:hover 
{
    background: #a6a6a6;
}
QScrollBar::sub-line:vertical 
{
    height: 15px;
    background: transparent;
    image: url(:/res/up_arrow.png);
    subcontrol-position: top;
}
QScrollBar::add-line:vertical 
{
        height: 15px;
        background: transparent;
        image: url(:/res/down_arrow.png);
        subcontrol-position: bottom;
}
QScrollBar::sub-line:vertical:hover 
{
        background: rgb(170, 200, 230);
}
QScrollBar::add-line:vertical:hover 
{
        background: rgb(170, 200, 230);
}
QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical 
{
        background: transparent;
}
QScrollBar#verticalScrollBar:vertical 
{
        margin-top: 30px;
}

QScrollArea 
{
    background-color: transparent;
}

QScrollBar:vertical
{
    background-color: transparent;
}

QScrollBar::handle:vertical
{
    padding: 100px 0 100px 0;
    background: rgba(0,0,0,0.3);
    border: none;
}

QScrollBar::add-page:vertical,
QScrollBar::sub-page:vertical
{
    background-color: transparent;
}

QScrollBar::sub-line:vertical,
QScrollBar::add-line:vertical
{
    height: 0px;
    width:0px;
}

常用样式： 

/*
    font-size 字号
    color 字体颜色
    font-weight 字宽
    font-style 字体样式
*/

font-size:20px;
color:red;
font-weight:bold;//三种形式：normal，bold，900
fontstyle:italic;
font: bold 18px;

/*
    border-style 边框样式 
        dotted：点状
        dashed：虚线
        solid：实线
        double：双线
        groove：凹槽边框
        ridge：垄状边框
        inset：inset 边框
        outset：outset 边框
    border 边框线大小
    border-color:blue red 上下蓝色 左右红色
*/

border-style: solid;   
border-color: red;
border-left: none;
border-top: none;
border-right: 2px solid #c0c0c0;
border-bottom: 2px solid #c0c0c0;
border:   none;
border:2px solid #ffa500;
border-radius: 5px;

单选框 

      当文本显示不全的时候，可使用：   padding:4px;    

#大小
QRadioButton::indicator{
    width:20px;
    height:20px;
    border-radius:10px;
    background-color:#DCDCDC;
}
#没有选择时候的图标
QRadioButton::indicator:unchecked
{
    width:20px;
    height:20px;
    border-radius:10px;
    background-color:#DCDCDC;
}
#选择时候的图标
QRadioButton::indicator:checked
{
    width:20px;
    height:20px;
    border-radius:10px;
    background-color:#00FA9A;
}

QLabel 

font-size:字号    color：字体颜色    font-weight：字宽    font-style：字体样式

font-size:20px;
color:red;
font-weight:bold;
font-style:italic

QHeaderView  

/******   表头   ******/
QHeaderView 
{
    background-color: #F0F0F0;
    color: #3C4457;
    font-size: 20px;
    min-height:40px;
}
QHeaderView::section
{
    background-color: #F0F0F0;
    border: 1px solid #A0A0A0;
}
QHeaderView::section:hover
{
    color:#FFD700;
    background:#EBEBC9;
}

QHeaderView::section:pressed
{
    background:#645B4A;
}

 QTableView

QTableView {
    background-color: white;
    border-left: 2px solid #808080;
    border-top: 2px solid #808080;
}
QTableView::item {
    color: #3C4457;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #808080; /*表格只显示横向的分隔线，不显示纵向的*/
}
QTableView::item:selected {
    color: #ffffff;
    background-color: #ffa500;
}

 QTreeWidget

QTreeWidget 
{
    background-color: white;
    border: 1px solid #C8D5EA;
    font: bold 16px;
}
QTreeWidget::item 
{
    background-color: transparent;
    color: #000000;
    border: 0px;
    height: 40px;
}
QTreeWidget::item:selected 
{
    color: #ffffff;
    background-color: #FFA500;
}

 QListWidget

QListWidget 
{
    background-color: white;
    border: 1px solid #C8D5EA;
    font: bold 16px;
}
QListWidget::item 
{
    background-color: transparent;
    color: #000000;
    border: 0px;
    padding-left: 20px;
    height: 40px;
}
QListWidget::item:selected 
{
    color: #ffffff;
    background-color: #FFA500;
}

 QComboBox 

QComboBox
{
    border: 1px solid gray;
    border-radius: 3px;
    padding: 1px 2px 1px 3px;
    background:#FFFFFF;
    min-width: 200px;
    min-height: 40px;
    max-width: 200px;
    max-height: 40px;
}

QComboBox:disabled 
{
    background-color: #F0F0F0;
}

QComboBox::drop-down
{
    border: 0px solid red;
    subcontrol-origin: padding;
    subcontrol-position: top right;
}

QComboBox:on
{
    min-height:20px;
    padding-top: 3px;
    padding-left: 4px;
}

QComboBox::down-arrow
{
    image: url(":/png/png/combox-arrow-down.png");
    width: 16px;
    height: 16px;
}

QComboBox QAbstractItemView
{
    border: 1px solid #ecf5ff;
    selection-background-color: #053553;
    selection-color: #33ff66;
    color: #3C4457;
    font-size: 16px;
    border: 0px solid red;
    outline: 0px;  /*去掉item虚线*/
}

QComboBox QAbstractItemView::item
{
    min-height: 40px;
    border-style: solid;
    border: 1px solid #00253f;
}
QComboBox QAbstractItemView::item:selected 
{
    background-color: #4876FF;
}

 QPushButton

QPushButton 
{
    background-color: transparent;
}
QPushButton:hover 
{
    background-color: gray;
}
QPushButton:pressed 
{
    padding-top: 2px;
    padding-left: 1px;
}
QPushButton:disabled 
{
    color: gray;
}

QToolButton

QToolButton 
{
    background-color: #42C734;
    color: white;
    font-size: 18px;
    min-height: 48px;
    min-width: 160px;
    max-height: 48px;
    max-width: 160px;
    
}
QToolButton:hover 
{
    color: #f8e71c;
}
QToolButton:pressed 
{
    padding-top: 2px;
    padding-left: 1px;
}
QToolButton:disabled 
{
    color: gray;
}

 QGroupBox

QGroupBox
{
    border: 1px solid grey;
    border-radius: 0px;
    margin-top: 15px; /*在标题顶部留出空格*/
}
QGroupBox::title 
{
    subcontrol-origin: margin;
    position: relative;
    left: 12px;
    padding: -2 2px;
}

 QTextEdit

QTextEdit 
{
    border: 1px solid #C8D5EA;
    background-color: white;
    color: #3C4457;
}

 QDoubleSpinBox/QSpinBox

QDoubleSpinBox,
QSpinBox {
    border: 1px solid #C8D5EA;
    background-color: white;
    color: #3C4457;
    font-size: 16px;
    min-width: 80px;
    min-height: 40px;
    max-height: 40px;
}
QDoubleSpinBox:disabled,
QSpinBox:disabled {
    background-color: #F0F0F0;
}
QDoubleSpinBox::up-button,
QSpinBox::up-button {
    image: url(:/res/qwe.png);
}
QDoubleSpinBox::up-button:pressed,
QSpinBox::up-button:pressed {
    padding-top: 1px;
    padding-left: 1px;
}
QDoubleSpinBox::down-button,
QSpinBox::down-button {
    image: url(:/res/qws.png);
}
QDoubleSpinBox::down-button:pressed,
QSpinBox::down-button:pressed {
    padding-top: 1px;
    padding-left: 1px;
}