Qt使用QSS样式表

QSS类型选择器

QT加载QSS样式表

写在main.cpp文件

QApplication a(argc, argv);
QFile file("./style/myQSS.qss");//qss文件路径
QString styleSheet;
if (file.open(QIODevice::Text | QIODevice::ReadOnly))
{
	QTextStream fileStream(&file);
	styleSheet = fileStream.readAll();
	qApp->setStyleSheet(styleSheet);
}
file.close();
MainWindow w;
w.show();

窗口背景

this->setObjectName("xahMainWindow");//在样式表中使用某个控件，需要在程序里设置控件名
xahMainWindow#xahMainWindow{border-image:url(./config/images/bg2.jpg)}//设置mainwindows窗口背景图
LedManagerDlg#LedManagerDlg{border-image:url(./pic/led/bg.jpg);}//设置对话框的背景图片
setStyleSheet ("background-color: rgb(0,0,0, 100)");//设置窗口透明度，前三个是颜色RGB，第四个是透明度

子窗口设置样式表无效，重写void paintEvent(QPaintEvent *)

protected:
    void paintEvent(QPaintEvent *);
    
void two_cgtyq::paintEvent(QPaintEvent *)
{
    //使子窗口的样式表生效，或者不继承QWidget，继承QFrame
    QStyleOption opt;
    opt.init(this);
    QPainter p(this);
    style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);
}

QPushButton样式

按钮显示图片，鼠标放上去显示图片，按钮按下显示图片，设置按钮圆角，字体大小，字体，字体颜色，按钮渐变色等

QPushButton#BTN_LED_EDITADDR {border-image : url(./pic/led/sz_1.gif);}//设置QPushButton显示图片
QPushButton#BTN_LED_EDITADDR:hover {border-image : url(./pic/led/sz_2.gif);}//设置QPushButton鼠标放上去显示图片
QPushButton#BTN_LED_EDITADDR:pressed {border-image : url(./pic/led/sz_2.gif);}//设置QPushButton鼠标按下显示图片
QPushButton#pushButton_ywbl:disabled {border-image : url(./images/huise/ywbl_03.png);}//QPushButton为不可点击时显示图片
//设置按钮选中时显示图片，需要setCheckable(true)
QPushButton#gmghStep1Dlg_pushButton_sfsjcqbg:checked {border-image : url(./images/global/yes.png);}
QPushButton{border:2px outset green;}//设置边框
ui->pushButton_0->setStyleSheet("QPushButton{border:2px groove gray;border-radius:6px;padding:1px 2px;});//设置圆角

QPushButton#pushButton_Demo{
    border-image : url(./style/images/btnBottom_normal.png);        //设置显示为图片
	font-size : 34px;                                               //字体大小
    color : rgb(82,249,251);                                        //字体颜色
    font-family : "黑体"                                            //设置字体
}

//渐变色，qlineargradient代表线性渐变，qradialgradient代表辐射渐变，qconicalgradient代表扇形渐变，或圆锥式渐变
//渐变过程：x1->x2：x方向渐变，即从左向右渐变；y1->y2：y方向渐变，即从上向下渐变。
//stop后面跟着的数字取值范围[0, 1]，stop: 0指起始位置，stop: 0.495与stop: 0.505 指中间位置 ，stop: 1 指结束位置
//rgba是指Red, Green, Blue, Alpha(透明度)
QPushButton:!hover{
	background-color: qlineargradient(spread:pad,  x1:0, x2:0, y1:0, y2:1,  
                                      stop: 0 rgba(120,120,120,255),
                                      stop: 0.495 rgba(39,39,39,255),
                                      stop: 0.505 rgba(39,39,39,255), 
                                      stop: 1 rgba(120,120,120,255));
}

QLabel

QLabel#label_TEXTINFO{font-size : 17px;color : red;font-weight: bold; font-family : "微软雅黑";}//设置QLabel字体大小、字体颜色、字体加粗、字体类型
QLabel#label_port{border-image:url(./images/pic/admin/printer/dk.jpg);}//设置QLabel显示图片

QLineEdit

//设置无边框且透明
ui->lineEdit->setStyleSheet("background:transparent;border-width:0;border-style:outset");
//文本为空时默认显示提示信息
ui->lineEdit_newUserName->setPlaceholderText(QString::fromLocal8Bit("请填写"));
//设置边框颜色
ui->lineEdit_name->setStyleSheet("border-style: outset; border-width: 2px; border-color: rgb(13,118,114);");
//设置圆角
ui->lineEdit_name->setStyleSheet("border:2px groove gray;border-radius:6px;padding:1px 2px;");

//QLineEdit设置显示图标
QLineEdit 
{
    background: #f3f3f3;
    background-image: url(:Images/search.svg); /* actual size, e.g. 16x16 */
    background-repeat: no-repeat;
    background-position: left;
    color: #252424;
    font-family: SegoeUI;
    font-size: 12px;
    padding: 2 2 2 20; /* left padding (last number) must be more than the icon's width */
    border: 1px solid #dddddd;
}

QSlider滑块

QSlider::groove:horizontal {border: 1px solid #4A708B;background: #C0C0C0;height: 5px;border-radius: 1px;padding-left:-1px;padding-right:-1px;}

QSlider::sub-page:horizontal {
background: qlineargradient(x1:0, y1:0, x2:0, y2:1, 
    stop:0 #B1B1B1, stop:1 #c4c4c4);
background: qlineargradient(x1: 0, y1: 0.2, x2: 1, y2: 1,
    stop: 0 #5DCCFF, stop: 1 #1874CD);
border: 1px solid #4A708B;
height: 10px;
border-radius: 2px;
}

QSlider::add-page:horizontal {background: #575757;border: 0px solid #777;height: 10px;border-radius: 2px;}

QSlider::handle:horizontal 
{
    background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, 
    stop:0.6 #45ADED, stop:0.778409 rgba(255, 255, 255, 255));

    width: 21px;margin-top: -3px;margin-bottom: -3px;border-radius: 5px;
}

QSlider::handle:horizontal:hover {
    background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0.6 #2A8BDA, 
    stop:0.778409 rgba(255, 255, 255, 255));
    width: 21px;margin-top: -3px;margin-bottom: -3px;border-radius: 5px;
}

QSlider::sub-page:horizontal:disabled {background: #808080;border-color: #999;}

QSlider::add-page:horizontal:disabled {background: #eee;border-color: #999;}

QSlider::handle:horizontal:disabled {background: #eee;border: 1px solid #aaa;border-radius: 4px;}

QTableView

ui->tableView->verticalHeader()->setVisible(false);//垂直表头不显示
ui->tableView->horizontalHeader()->setVisible(false);//水平表头不显示
ui->tableView->setSelectionBehavior(QAbstractItemView::SelectRows);//设置选中整行
ui->tableView->setEditTriggers(QAbstractItemView::NoEditTriggers);//设置不可编辑
ui->tableView->horizontalHeader()->setSectionResizeMode(QHeaderView::Stretch);//设置自适应调整宽度，填充整个屏幕
ui->tableView->setShowGrid(false);//不显示网格线
//显示下划线
ui->tableView->setStyleSheet("QTableView::Item{border:0px solid rgb(0,0,0);"
                                 "border-bottom:1px solid rgb(0,0,0);}");

ui->tableView->setAlternatingRowColors(true);//设置相邻行颜色交替显示
ui->tableView->verticalHeader()->setDefaultSectionSize(59);//设置默认行高
ui->tableView->setSelectionMode(QAbstractItemView::NoSelection);//设置表格不可被选中
//    QTableWidgetItem *item=ui->tableView->item(0,4);//设置表格中某个单元格不可被选中,QTableWidget有该方法