自定义QSS

1、常用

QPushButton{
    min-width:75px;
    max-width:75px;
    min-height:20px;
    border:1px solid black;
    border-radius:5px;
}
QPushButton:hover{
    background-color: #333333;
    border-color: #444444;
    color:rgb(255,255,255);
}
QPushButton:pressed{
    background-color: #111111;
    border-color: #333333;
    color: yellow;
}

QGroupBox {
    border: 1px solid #E5E5E5;
    border-radius: 5px;
    margin-top: 1ex;
    background-color: rgb(245, 245, 245);
}
QGroupBox::title {
    subcontrol-origin: margin;
    subcontrol-position: top center;
    padding: 0 8px;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #CDCDCD, stop: 1 #FFFFFF);
}

QLineEdit{
    min-width:50px;
    max-width:50px;
    border: 1px solid gray;
    border-radius: 3px;
    padding: 0 8px;
    background: #F5F5F5;
    selection-background-color: darkgray;
    border-color:#000000;
}

QTableWidget{
    background:#FFFFFF;
    border:none;
    font-size:12px;
    font-family:"Microsoft YaHei";
    color:#000000;
}
QTableWidget::item::selected{
    color:red;
    background:#EFF4FF;
}

QScrollBar:vertical{ 
    width:12px; 
    background:rgb(0,0,0); 
    border:1px solid rgba(0,0,0,50); 
    margin:0px,0px,0px,0px; 
    padding-top:0px; 
    padding-bottom:0px; 
    border-radius:4px;
} 
QScrollBar::handle:vertical{ 
    width:12px; 
    background:rgb(194,201,215); 
    border-radius:4px;
} 
QScrollBar::handle:vertical:hover{ 
    background:rgb(0,0,0); 
} 
QScrollBar::sub-line:vertical{ 
    background:transparent;
} 
QScrollBar::add-line:vertical{
    background:transparent;
} 
QScrollBar::add-page:vertical{ 
    background:rgb(255,255,255); 
} 
QScrollBar::sub-page:vertical{ 
    background:rgb(255,255,255); 
}

QHeaderView::section {
    background: #D6DBE9;
    border: 0;
    color: #FFFFFF;
    border: 1px solid #6c6c6c;
    padding: 3px 3px 3px 3px;
}
QTabWidget::tab-bar { 
    alignment: left; 
} 
QTabWidget::pane {
    border-top: 2px solid #C2C7CB; 
} 
QTabBar::tab:selected { 
    margin-top:0px; 
    border-color: #9B9B9B; 
    border-bottom-color: #C2C7CB;
} 
QTabBar::tab:!selected { 
    margin-top: 2px; 
} 
QTabBar::tab { 
    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: 2px solid #C4C4C3; 
    border-bottom-color: #C2C7CB; 
    border-top-left-radius: 4px; 
    border-top-right-radius: 4px; 
    min-width: 8ex; 
    padding: 2px; 
} 
QWidget{ 
    background-color:#F5F5F5;
}

QCheckBox::indicator{ 
    width: 13px; 
    height: 13px; 
    background-color: #00FF00; 
    border: 1px solid #000000; 
    border-radius:4px;
} 
QCheckBox::indicator::checked{ 
    background-color: qradialgradient(cx:0.5, cy:0.5, fx:0.25, fy:0.15, radius:0.3, stop:0 #FF0000, stop:1 #FFFFFF);
}
QTextEdit{ 
    border: 1px solid gray; 
    border-radius: 5px;
}

QToolTip{
    border:1px solid rgb(118, 118, 118);
    background-color: #ffffff;
    color:#484848;
    font-size:12px;
}

/*MainWindow设置背景图，为了防止不干扰其他控件，需要指定背景图只作用于MawinWindow*/

#MainWindow{background-image: url(:/new/prefix1/log1.jpg);}

2、登录界面

qss：

#Login{background-image: url(:/new/prefix1/timg1.jpg);}

QCheckBox::indicator{
    width: 13px;
    height: 13px;
    background-color: #00FF00;
    border: 1px solid #000000;
    border-radius:4px;
}

QLineEdit {
    min-width:200px;
    min-height:25px;
    border: 1px solid rgb(41, 57, 85);
    border-radius: 3px;
    background: white;
    selection-background-color: blue;
    font-size: 14px ;
}

QLineEdit:hover {
    border: 1px solid yellow;
}

QPushButton{
    border-radius: 4px;
    border: none;
    min-width: 75px;
    min-height: 35px;
}

QPushButton:enabled {
    background: rgb(68, 69, 73);
    color: white;
}

QPushButton:!enabled {
    background: rgb(100, 100, 100);
    color: rgb(200, 200, 200);
}

QPushButton:enabled:hover{
    background: rgb(85, 85, 85);
}

QPushButton:enabled:pressed{
    background: rgb(80, 80, 80);
}

3、QMenu

sysMenu->setStyleSheet("QMenu {background-color:rgb(89,87,87); border: 3px solid rgb(235,110,36);}\
QMenu::item{font - size: 10pt;color: rgb(225, 225, 225);border: 3px solid rgb(60, 60, 60);\
background - color:rgb(89, 87, 87);padding:16px 16px;margin:2px 2px;}\
QMenu::item:selected{background - color:rgb(235, 110, 36);}\
QMenu::item:pressed{border: 1px solid rgb(60, 60, 61);background - color: rgb(220, 80, 6); }");

4、蓝色风格QTableWidget

/*tabelwidget*/
QTableWidget{
text-align:center;
color:#E4D625;
background:#31419B;
border:1px solid #242424;
alternate-background-color:#B3C6E7;/*交错颜色*/
gridline-color:#242424;
}

/*选中item*/
QTableWidget::item:selected{
color:black;
background:#B3C6E7;
}

/*
悬浮item
QTableWidget::item:hover{
background:#FFFFFF;
}*/
/*表头*/
QHeaderView::section{
text-align:center;
background:#021482;
font:15pt;
padding:3px;
margin:0px;
color:white;
border:1px solid #242424;
border-left-width:0;
}

/*表右侧的滑条*/
QScrollBar:vertical{
background:#484848;
padding:0px;
border-radius:6px;
max-width:12px;
}

/*滑块*/
QScrollBar::handle:vertical{
background:#CCCCCC;
}
/*
滑块悬浮，按下*/
QScrollBar::handle:hover:vertical,QScrollBar::handle:pressed:vertical{
background:#A7A7A7;
}
/*
滑块已经划过的区域*/
QScrollBar::sub-page:vertical{
background:444444;
}

/*
滑块还没有划过的区域*/
QScrollBar::add-page:vertical{
background:5B5B5B;
}

/*页面下移的按钮*/
QScrollBar::add-line:vertical{
background:none;
}
/*页面上移的按钮*/
QScrollBar::sub-line:vertical{
background:none;
}

设置代码可实现居中：

   int row = ui->tableWidget->rowCount();
    int columns = ui->tableWidget->columnCount();
    for (int i=0;i<row;i++)
    {
        for (int j=0;j<columns;j++)
        {
            ui->tableWidget->item(i,j)->setTextAlignment(Qt::AlignHCenter|Qt::AlignVCenter);
        }
    }

5、设置点击之后没有虚线

outline:0px

6、将文件中的qss设置到Qt中

QFile qss(":/qss/style.qss");//设置qss文件打开路径
qss.open(QFile::ReadOnly);//只读，打开qss文件
if(qss.isOpen())
{
    this->setStyleSheet(qss.readAll());//如果打开成功，设置样式
    qss.close();//关闭qss文件
}

7、深蓝色主题

QLabel{
    background-color: #000C3C;
    color: white;
}

QLineEdit{
    font:12pt;
    qproperty-alignment:AlignHCenter;
    background-color: #E5E6EB;
    color: #338ED0;
}


QComboBox QAbstractItemView
{
     border: 1px solid rgb(161,161,161);
}
 
QComboBox QAbstractItemView::item
{
    height: 24px;
}
 
QComboBox QAbstractItemView::item:selected
{    
    background-color: rgba(247, 119, 84);
}

QComboBox
{
    font-family:'Microsoft YaHei';
    font-size:15px;
}


/*tabelwidget*/
QTableWidget{
    outline:0px;
    text-align:center;
    color:#DDDDDD;
    background:#000C3C;
    border:0px solid #242424;
    alternate-background-color:#B3C6E7;/*交错颜色*/
    gridline-color:#B0B0C9;
}

/*选中item*/
QTableWidget::item:selected{
    background:#31419B;
}

/*
悬浮item
QTableWidget::item:hover{
    background:#FFFFFF;
}*/
/*表头*/
QHeaderView::section{
    text-align:center;
    background:#366092;
    font:12pt;
    padding:3px;
    margin:0px;
    color:#DDDDDD;
    border:1px solid #242424;
    border-left-width:0;
}

/*表右侧的滑条*/
QScrollBar:vertical{
    background:#484848;
    padding:0px;
    border-radius:6px;
    max-width:12px;
}

/*滑块*/
QScrollBar::handle:vertical{
    background:#CCCCCC;
}
/*
滑块悬浮，按下*/
QScrollBar::handle:hover:vertical,QScrollBar::handle:pressed:vertical{
    background:#A7A7A7;
}
/*
滑块已经划过的区域*/
QScrollBar::sub-page:vertical{
    background:444444;
}

/*
滑块还没有划过的区域*/
QScrollBar::add-page:vertical{
    background:5B5B5B;
}

/*页面下移的按钮*/
QScrollBar::add-line:vertical{
    background:none;
}
/*页面上移的按钮*/
QScrollBar::sub-line:vertical{
    background:none;
}

QGroupBox {
    font-family:'宋体';
    font-size: 15px;
    border: 1px solid #052153;
    border-radius: 10px;
    margin-top: 2ex;
}
QGroupBox::title {
    color:#DDDDDD;
    subcontrol-origin: margin;
    subcontrol-position: top center;
    padding: 2px 8px;
    background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #366092, stop: 1 #000C3C);
}

/*QMenu*/
QMenu {
    background-color: #3379B7;
    border: 1px solid white;
}

/*QDialog*/
QDialog{
    background:#3379B7;
}

/*QTextEdit*/
QTextEdit {
    font-size: 18px;
    font-family:'宋体';
    background-color:#222648;
    border:0px;
}

/*QTreeWidget*/
QTreeWidget{
    background-color: #222648;
    font-size:15px;
    color: white;
    outline:0px;
}

QTreeWidget::item{
    margin:13px;
    background: #222648;
    background-clip: margin;
}

QTreeWidget::branch{
    background:#222648;
}

QTreeView::item:hover {
    background: rgb(69, 187, 217);;
}

QTreeView::item:selected:active{
    background: rgb(63, 147, 168);
}

QTreeView::item:selected:!active {
    background: rgb(63, 147, 168);
}

QTreeWidget::branch:closed:has-children:!has-siblings,QTreeWidget::branch:closed:has-children:has-siblings {
    border-image: none;
    image: url(:/ICON/plus.png);
}

QTreeWidget::branch:open:has-children:!has-siblings,
QTreeWidget::branch:open:has-children:has-siblings  {
    border-image: none;
    image: url(:/ICON/minus.png);
}

QWidget {
    background:#1A1D3C
}

8、按钮图表+鼠标响应

ui->pushButton_add->setIcon(QIcon(":/icon/icon/add.png"));
ui->pushButton_add->setFlat(true);
ui->pushButton_add->setStyleSheet("QPushButton{border:0px solid white;outline:0px;}"
                                "QPushButton:hover{border-image:url(:/icon/icon/red1.png);}"
                                "QPushButton:pressed{border-image:url(:/icon/icon/red.png);}");//设置鼠标滑过颜色变化

9、通过QSS设置icon

QPushButton{
　　qproperty-icon:url(:/icon/ICON/jigui.png);
　　qproperty-iconSize:40px 40px;
}

10、ui里的line设置QSS

其实就是QFrame

首先找到其属性frameShadow，改成Palin

然后设置QSS

QFrame#line_6{
    background-color: #5CF1FF;
}

11、进度条

/*QProgressBar*/
QProgressBar{
    border: 0px solid #FFFFFF;
    height: 25px;
    background: #183865;
    text-align: center;
    border-radius: 10px;
    color: #FFFFFF;
    font: 12px "Microsoft YaHei";
}
QProgressBar::chunk {
    background-color: #27B27F;
    border-radius: 10px;
}

12、QWidget边框效果，QTextEdit

QWidget#log{
    border: 1px solid #1B5FA1;
/*    background: rgba(3,68,123,0.25);*/
background: rgb(1,23,68);
}

/*QLabel*/
QLabel {
    font: 16px "Microsoft YaHei";
    color: #00D8FF;
}
/*QTextEdit*/
QTextEdit {
    font-size: 12px;
    font-family:'Microsoft YaHei';
    background-color:rgba(3,68,123,0);
    border:0px;
}

/*表右侧的滑条*/
QScrollBar:vertical{
    background:#484848;
    padding:0px;
    border-radius:6px;
    max-width:12px;
}

/*滑块*/
QScrollBar::handle:vertical{
    background:#CCCCCC;
}
/*
滑块悬浮，按下*/
QScrollBar::handle:hover:vertical,QScrollBar::handle:pressed:vertical{
    background:#A7A7A7;
}
/*
滑块已经划过的区域*/
QScrollBar::sub-page:vertical{
    background:444444;
}

/*
滑块还没有划过的区域*/
QScrollBar::add-page:vertical{
    background:5B5B5B;
}

/*页面下移的按钮*/
QScrollBar::add-line:vertical{
    background:none;
}
/*页面上移的按钮*/
QScrollBar::sub-line:vertical{
    background:none;
}

注意widget的objname就是log

13、QSS不影响子类

加点号

.QPushButton{
    color:red;    
}

14、QTreeWidget

/*表头*/
QHeaderView::section{
    text-align:center;
    color: #AFE4FF;
    background-color: rgba(5, 81, 139, 0.63);
    font: 16px "Microsoft YaHei";
    padding:3px;
    margin:0px;
    border:0px solid #242424;
    border-top-width:0;
    border-right-width:0;
    color: white;
}
/*背景、字体*/
QTreeWidget{
    border: 1px solid gray;
    background: rgba(53,68,111,0);
    color: white;
    font-size:17px;
}
QTreeView::item:hover{background-color:rgb(0,255,0,50)}

QTreeView::item:selected{background-color:rgb(255,0,0,100)}

/*张开时的三角图标*/
QTreeView::branch:has-children:!has-siblings:closed,
QTreeView::branch:closed:has-children:has-siblings {
    border-image: none;
    image: url(:/img/img/down_ar.png);
}
/*合起时的三角图标*/
QTreeView::branch:open:has-children:!has-siblings,
QTreeView::branch:open:has-children:has-siblings  {
    border-image: none;
    image: url(:/img/img/right_ar.png);
}

15、QPushButton和QToolButton设置图标

QPushButton#pushButton_refresh{
    min-width: 90px;
    min-height: 25px;
    max-width: 90px;
    max-height: 25px;
    background-color: green;
    border-radius: 5px;
    font: 14px "Microsoft YaHei";
    color: #FFFFFF;
    border: 0px solid gray;
    qproperty-icon:url(:/main/refresh.png);
}
QPushButton:hover#pushButton_refresh{
    background-color: #333333;
    border-color: #444444;
    color:rgb(255,255,255);
}
QPushButton:pressed#pushButton_refresh{
    background-color: #111111;
    border-color: #333333;
    color: yellow;
}

16、设置单边边框

QLineEdit{
    border: 0px solid gray;
    border-bottom: 1px solid gray;
    background: rgba(0,0,0,0);
    color:#00D8FF;
    font: 14px "Microsoft YaHei";
}

17、QMessageBox

QMessageBox {
    background-color: #F2F2F2; /* QMessageBox背景颜色 */
}

QMessageBox QLabel#qt_msgbox_label { /* textLabel */
    color: #298DFF;
    background-color: transparent;
    min-width: 240px; /* textLabel设置最小宽度可以相应的改变QMessageBox的最小宽度 */
    min-height: 40px; /* textLabel和iconLabel高度保持一致 */
}

QMessageBox QLabel#qt_msgboxex_icon_label { /* iconLabel */
    width: 40px;
    height: 40px; /* textLabel和iconLabel高度保持一致 */
}

ps：控件的布局

语法可以参考：

https://blog.csdn.net/aristolto/article/details/80234934

posted @ 2017-12-16 12:16 朱小勇阅读(1650) 评论(0) 收藏举报

刷新页面返回顶部

朱小勇

自定义QSS

公告