qt qss总结

listwidget

/* QSS:*/
QListWidget{
    
    border:1px solid gray; color:black; }
QListWidget::Item{
    
    padding-top:-2px; padding-bottom:-1px;}
QListWidget::Item:hover{
    
    background:skyblue;padding-top:0px; padding-bottom:0px; }
QListWidget::item:selected{
    
    background:lightgray; color:red; }
QListWidget::item:selected:!active{
    
    active{
    
    border-width:0px;background:lightgreen; }

/* qt4 背景透明*/
#list_widget {
    
    background-color: rgb(255, 255, 255, 0);}
#list_widget:item:selected {
    
    background-color: rgb(255, 255, 255, 0);}

pushbutton

/* 设置字体大小,按键按下和松开展示图片*/
QPushButton {
    
     font-size: 28px;
color: rgb(255, 255, 255);}
QPushButton {
    
    border-image: url(:/icon/yt328_setting/list_bt.png);}
QPushButton:pressed {
    
    border-image: url(:/icon/yt328_setting/list_bt_press.png);}

tabWidget

/* 配置tab */
QTabBar::tab {
    
    font-size:16px;color:rgb(89,119,176);width:160px;height:60px;background-color: rgb(0, 0, 0,0);}
QTabBar::tab:selected {
    
    font-size:28px;color:rgb(255,255,255);}
/* 配置QTabWidget窗口 */
#tabWidget {
    
    background-color: rgb(0, 0, 0, 0);}

QTabWidget::pane{
    
    
border:none;
}

checkbox

QCheckBox {
    
    
    spacing: 5px;  # 在这里我们也可以设置复选的文本样式
}
QCheckBox::indicator {
    
    
    width: 15px;
    height: 15px;
}
QCheckBox::indicator:unchecked {
    
    
    image: url(:/buttonbg/checkbox_normal);
}
QCheckBox::indicator:unchecked:disabled {
    
    
    image: url(:/buttonbg/checkbox_disable);
}
QCheckBox::indicator:unchecked:hover {
    
    
    image: url(:/buttonbg/checkbox_hover);
}
QCheckBox::indicator:checked {
    
    
    image: url(:/buttonbg/checkbox_down);
}
QCheckBox::indicator:indeterminate {
    
    
    image: url(:/buttonbg/checkbox_indeterminate);
}

QRadioButton

关于分组:
1、使用QButtonGroup进行分组,此方式QButtonGroup有信号可以获取点击的是哪个按键;
2、使用QGroupBox进行分组,此方式必须为每个radiobutton绑定槽函数处理;

QRadioButton{
    
    
    spacing: 2px;
    color: white;
}
QRadioButton::indicator {
    
    
    width: 45px;
    height: 30px;
}
QRadioButton::indicator:unchecked {
    
    
    image: url(:/Images/switchOff);
}
QRadioButton::indicator:unchecked:hover {
    
    
    image: url(:/Images/switchOffHover);
}
QRadioButton::indicator:unchecked:pressed {
    
    
    image: url(:/Images/switchOffPressed);
}
QRadioButton::indicator:checked {
    
    
    image: url(:/Images/switchOn);
}
QRadioButton::indicator:checked:hover {
    
    
    image: url(:/Images/switchOnHover);
}
QRadioButton::indicator:checked:pressed {
    
    
    image: url(:/Images/switchOnPressed);
}

参考:qss之QRadioButton


QSlider

部件说明
在这里插入图片描述

QSlider::handle:horizontal {
    
    width:20px;height:30px;border-image: url(:/icon/yt328_setting/slider_bar.png);margin-top:60px;margin-bottom:60px}
QSlider::groove:horizontal {
    
    height:6px;background-color: rgb(255, 255, 255)}

倒圆角

border-radius:6px;

QSpinbox

QSpinBox {
    
    
    /* 为箭头保留空间 */
    padding-right:20px;
    border:3px solid green;
    background:#FD5687;
    min-width:40px;
}

/* 向上按钮 */
QSpinBox::up-button {
    
    
    subcontrol-origin:border;
    subcontrol-position:top right;
    width:16px;
    border-image:url(:/images/02.bmp);
    border-width:1px;
}

/* 向上按钮 */
QSpinBox::up-button:hover {
    
    
    border-image:url(:/images/111.bmp) 1;
}
/* 向上按钮 */
QSpinBox::up-button:pressed {
    
    
    border-image:url(:/images/222.bmp) 1;
}
/* 向上按钮里的小箭头 */
QSpinBox::up-arrow {
    
    
    image:url(:/images/333.bmp);
    width:7px;
    height:7px;
}
/* 向下按钮 */
QSpinBox::down-button {
    
    
    subcontrol-origin:border;
    subcontrol-position:bottom right;
    width:16px;
    border-image:url(:/images/02.bmp);
    border-width:1px;
    border-top-width:0;
}
/* 向下按钮 */
QSpinBox::down-button:hover {
    
    
    border-image:url(:/images/111.bmp) 1;
}
/* 向下按钮 */
QSpinBox::down-button:pressed {
    
    
    border-image:url(:/images/222.bmp) 1;
}
/* 向下按钮里的小箭头 */
QSpinBox::down-arrow {
    
    
    image:url(:/images/333.bmp);
    width:7px;
    height:7px;
}

transparent 透明
qlineargradient 线性渐变
QRadialGradient 圆形渐变
QConicalGradient 圆锥形渐变


Qframe有重要作用


border、padding、margin

在这里插入图片描述
border:(轮廓)边框宽度
margin:边框外距
padding:边框内距

参考:
属性设置参考
QSS总结以及最近做的Qt项目

猜你喜欢

转载自blog.csdn.net/GeiGe123/article/details/118344450