（QT）qss与按钮

一、qss

1、qss相关概念

QT QSS（Qt Style Sheets）文件是一种基于CSS的样式表语言，用于定义QT应用程序的外观和风格。它可以用于控制应用程序中的各种界面元素的外观和行为，如按钮、标签、文本框、滚动条等。

2、qss优点

①与界面逻辑分离：使用QSS文件可以将界面的外观与逻辑分离，这使得设计人员和开发人员可以分别负责外观和功能。这也使得修改应用程序的外观变得更加容易和灵活。

②多主题支持：QSS文件支持多个主题，开发人员可以通过更改QSS文件轻松地实现主题切换，以适应不同的用户需求。

③维护方便：使用QSS文件可以避免在代码中硬编码样式信息，从而使应用程序更易于维护和调试。此外，由于样式信息集中在QSS文件中，因此修改样式只需要修改一个文件即可。

④代码复用：QSS文件支持样式继承，可以通过定义基本样式并继承它们来减少重复代码的编写。

3、qss文件读取

//通过QFile类读取b.qss文件，并使用setStyleSheet()函数设置全局样式。
//如果b.qss文件不存在或读取失败，应用程序将不会设置全局样式。
#include "widget.h"
#include 
#include 

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QFile file(":/b.qss");//qss文件的PATH
    /*判断文件是否存在*/
    if (file.exists() )
    {
        /*以只读的方式打开*/
        file.open(QFile::ReadOnly);
        /*以字符串的方式保存读出的结果*/
        QString styleSheet = QLatin1String(file.readAll());
        /*设置全局样式*/
        qApp->setStyleSheet(styleSheet) ;
        /*关闭文件*/
        file.close();
    }

    Widget w;
    w.show();
    return a.exec();
}

二、按钮

1、常用按钮种类

①  QPushButton：普通的按钮，可以设置文本和图标，支持各种点击和交互效果。

②  QRadioButton：单选按钮，用于从一组互斥的选项中选择一个。

③  QCheckBox：复选框，用于从一组非互斥的选项中选择一个或多个。（默认为二态，通过勾选ui属性栏中的tristate或调用Tristate(true)方法来启动三态）

④  QToolButton：工具按钮，与QPushButton相似，但通常用于显示图标而不是文本，可以与QMenu结合使用。

三、qss文件配置按钮

1、QPushButton

//配置了pushButton_2 四种状态下的边框图片（正常、鼠标悬停、选中和选中悬停）。
QPushButton#pushButton_2 {border-image:url(:/1.png)}
QPushButton#pushButton_2:hover {border-image:url(:/2.png)}
QPushButton#pushButton_2:checked {border-image:url(:/3.png)}
QPushButton#pushButton_2:checked:hover{border-image:url(:/4.png)}

//QPushButton的默认样式，包括背景颜色、字体大小和圆角半径
QPushButton{background-color:#404040;font-size:30px;border-radius:10px}
//QPushButton在选中状态下背景颜色和字体颜色。
QPushButton::checked{background-color:green;color:white}

2、QRadioButton

//QRadioButton在未选中、选中状态下的指示器图片
QRadioButton::indicator:unchecked{image:url(:/1.png)}
QRadioButton::indicator:checked{image:url(:/2.png)}
//QRadioButton的默认样式，包括字体大小和颜色
QRadioButton{font-size: 30px ;color: #99404040}
//定义了QRadioButton的指示器大小
QRadioButton::indicator{width:30px;height:30px}

3、QCheckBox

//设置QCheckBox在未选中、半选中、选中状态下的指示器图片
QCheckBox::indicator:unchecked { image: url(:/1.png)}
QCheckBox::indicator:indeterminate { image: url(:/2.png)}
QCheckBox::indicator:checked { image: url(:/4.png)}