QT--样式的修改

提示：本文为学习记录，若有错误，请联系作者，谦虚受教。

---

前言

不断进步， 是治疗失意和自卑的最佳方式。

---

前提css/qss是提前准备好的样式文件，直接加入即可。

一、窗体样式修改方法一

在项目中添加资源。
:/image/image/black.css

在构造函数中加入样式

 MainWindow::loadStyleSheet(":/image/image/black.css");//在构造函数中加入样式

在MainWindow.cpp中加入

//将QSS文件打开，传参
void MainWindow::loadStyleSheet(const QString &styleSheetFile)
{
   QFile file(styleSheetFile);
   file.open(QFile::ReadOnly);
   if(file.isOpen())
    {
        QString styleSheet=this->styleSheet();
        styleSheet +=QLatin1String(file.readAll());//只读
        this->setStyleSheet(styleSheet);//文件内容传参
        file.close();
    }
    else {
        QMessageBox::information(this,"警告","没有文件");
    }
}

此时就可以加入black.css中的样式了。

---

二、窗体样式修改方法二

新建一个.h文件

.h文件代码如下：

#ifndef MYHELPER_H
#define MYHELPER_H
#include "QObject"
#include <QDesktopWidget>
#include<QFile>
#include <QtCore>
#include <QtGui>
#include<QMessageBox>
//样式
class myhelper:public QObject
{
public:
    //窗体居中显示
    static void FormInCenter(QWidget *frm)
    {
        int frmX = frm->width();
        int frmY = frm->height();
        QDesktopWidget w;
        int deskWidth = w.width();
        int deskHeight = w.height();
        QPoint movePoint(deskWidth / 2 - frmX / 2, deskHeight / 2 - frmY / 2);
        frm->move(movePoint);
    }
    //设置皮肤样式
    static void SetStyle(const QString &styleName)
    {
        QFile file(QString(":/image/image/black.css").arg(styleName));
        file.open(QFile::ReadOnly);
        QString qss = QLatin1String(file.readAll());
        qApp->setStyleSheet(qss);//设置样式   add by zxh 2021.11.10
        qApp->setPalette(QPalette(QColor("#c0c0c0")));//设置背景色  #F0F0F0
    }
    //设置中文样式
    static void SetChinese()
    {
        QTranslator *translator = new QTranslator(qApp);
        translator->load(":/image//image/qt_zh_CN.qm");
        qApp->installTranslator(translator);
    }
};
#endif // MYHELPER_H

构造函数中

myhelper::FormInCenter(this);//居中窗口

在main函数中，加入头文件，且添加如下代码。

    myhelper::SetStyle("black");//样式名称
    myhelper::SetChinese();

三、补充部分样式修改方法

一、checkbox

对于子窗口部分的样式修改，例如修改部分的checkbox，
若是父窗口则是全部修改在QSS/CSS进行。

    ui->timSend->setStyleSheet("QCheckBox::indicator {width: 20px; height: 20px;}QCheckBox::indicator:checked {image: url(:/image/image/checkbox_checked.png);}"
                               "QCheckBox::indicator:unchecked {image: url(:/image/image/checkbox_unchecked.png);}");
    ui->sendBase_checkbox->setStyleSheet("QCheckBox::indicator {width: 20px; height: 20px;}QCheckBox::indicator:checked {image: url(:/image/image/checkbox_checked.png);}"
                              "QCheckBox::indicator:unchecked {image: url(:/image/image/checkbox_unchecked.png);}");

---

二、设置背景色

一、设置背景色可以选择在构造函数中进行

    //设置背景颜色
  QPalette palette(this->palette());
  palette.setColor(QPalette::Background, Qt::black);
  palette.setColor(QPalette::Background, QColor (203, 203, 203));//221,248,255,#c0c0c0
  this->setPalette(palette);

二、也可以在另建一个样式.h头文件中设置

qApp->setPalette(QPalette(QColor("#c0c0c0")));//设置背景色  #F0F0F0

---

三、button

对于按钮的样式修改，有两种方式
一、直接在.cpp文件中修改样式；
利用setStyleSheet.

this->ui->radioButton->setStyleSheet("color:red");

二、在QSS/CSS中修改样式
QSS代码

//无操作
QPushButton
{
     background-color: rgb(88, 112, 127);

}
//按钮悬浮
QPushButton:hover
{
    background-color:red;
    border-width:6px;
    border-radius:8px;
}
//按下按钮
QPushButton:pressed
{
    background-color:green;
}

CSS代码

//无操作
.QPushButton[focusPolicy="0"] {
	border-style: none;
	border: 0px;
	color: #F0F0F0;
	padding: 0px;	
	min-height: 10px;
	border-radius:3px;
	background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #4D4D4D, stop:1 #292929); 
}
//按钮悬浮
.QPushButton:hover{ 
	background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #636363, stop:1 #575757);
}
//按下按钮
.QPushButton:pressed{ 
	background: qlineargradient(spread:pad, x1:0, y1:0, x2:0, y2:1, stop:0 #4D4D4D, stop:1 #292929);
        background-color: rgb(49, 152, 114);
}

总结

善于总结，多进一步。