图文讲解:QT样式表StyleSheet的使用与加载

版权声明:博主新建的qq群:1025127672 https://blog.csdn.net/qq_31073871/article/details/79943093

目录

0、参考链接

1、设计师界面添加样式

1.1 几点注意事项

2、用程序添加样式

2.1 用程序语句添加

2.2 用qss文件添加

2.2.1 引用qss文件的磁盘路径

2.2.2 引用qss文件的资源路径


0、相关链接

官网的样式表链接:http://doc.qt.io/archives/qt-4.8/stylesheet.html

各种控件的样式:http://doc.qt.io/archives/qt-4.8/stylesheet-reference.html

QSS语法:http://www.w3school.com.cn/css/css_syntax.asp

使用样式表的3种方法:《Qt 之 样式表的使用——设置样式的方法 》https://blog.csdn.net/goforwardtostep/article/details/60884870

其实本质上就两种:1、在设计师界面上直接添加,2、用程序设置


1、在设计师界面上直接添加

举例,在设计师界面拖入一个QPushButton,右击这个按钮,选择改变样式表,就会弹出添加样式的窗口;

或者,左键选中这个按钮,在右侧的属性对话框中找到StyleSheet属性,点击...按钮也可打开样式表窗口,如下图所示


在打开的编辑样式表窗口直接输入“样式语句”,点击应用apply即可实时看到样式的效果,如下图所示:


编辑样式表这个窗口可以实时提示,我们输入的qss语句语法是否正确,如果正确会在左下角提示:有效样式表,当然,这个语法检查功能非常有限,只能检查语法的格式,例如是否缺少了大括号、是否漏了冒号、分号。

1.1 注意事项

    1、这里有一点比较另类,设定背景颜色background-color时,必须要同时把设置一下边框属性:如边框圆角border-radius、边框粗细等,否则背景色无法生效。

    2、如上图所示,样式表可以用大括号限定作用的控件类型,比如QPushButton{  },如果不用大括号限定控件类型,那么该控件的所有子控件都会显示为父控件的样式,最典型的例子,使用容器类控件时,

例如QGroupBox,我们不用QGroupBox{  }限定qss语句的作用范围,而是直接设置其样式,那么该容器中的任何子控件(按钮、单选框、label等)都会显示为QGroupBox的样式,如下图所示:


由此我们还可以联想到,主窗口是所有控件的父控件,

(1)如果我们设置了主窗体的样式,而不指定作用范围,那么窗体内的所有控件都会按照主窗体的设置的样式来显示;

(2)如果我们在主窗体中设置样式时指定作用范围为QPushButton,那么该窗体内的所有QPushButton就都会显示为所设置的样式。

(3)如果父控件和子控件都设置了样式,那么子控件就按照自己的样式来显示,这是覆盖机制,因为父控件总是在子控件之前构造,子控件在构造时,会把原先的设置给覆盖掉。


2、用程序添加样式

2.1 用程序语句添加

    这种方法更简单粗暴,每一个控件都有自己的setStyleSheet(QString &)成员函数,直接把方法一里面的样式语句,作为形参传入该方法即可,例如:

QString pushButton_SS = "QPushButton{border-radius: 10px; /*圆角半径*/color:green;/*字体颜色*/}";
ui->pushButton_SerialSend->setStyleSheet(pushButton_SS);

2.2 用qss文件添加

跟2.1节的方法基本一样,唯一的不同就是,样式表的语句是从文件中读入的,而2.1节的样式语句是直接写在程序里的。

步骤如下:

1、新建一个txt文本文档,并修改后缀名为.qss,文件名任取,例如:myStyleSheet.qss,

2、在这个qss文件中写qss语句

3、在程序中用QFile类读取该文件,并把读出的内容传递给setStyleSheet()函数

下面是从别处抄来的例程:

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    this->loadStyleSheet(":/qss/myStyleSheet.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,"tip","cannot find qss file");
    }
}
给MainWindow添加成员函数loadStyleSheet(),直接在构造函数中调用它即可

myStyleSheet.qss文件的内容如下:

QPushButton
{/*按钮无任何操作时*/
     background-color: green;/*背景色*/
}
QPushButton:hover
{ /*鼠标悬停在按钮上时*/
    background-color:red;
}

QPushButton:pressed
{ /*按钮被按下时*/
     background-color:green;
}

2.2.1引用qss文件的外部路径

    加载qss文件时,需要指定文件路径(一般是相对路径),如果把qss文件放在磁盘上,文件暴露在用户眼皮底下,可能会被用户随意修改,解决方法就是把qss文件作为资源,一起打包进exe文件中

2.2.2引用qss文件的资源路径

步骤如下:

1、在qt左侧目录树的顶层文件夹上右击->添加新文件->选择QT->QT resource file->choose,输入自定义资源文件的名字res->选择资源文件的存放路径->下一步->ok,这样就可以在目录树中看到一个文件 res.qrc。(如果已经创建过资源文件,则跳过该步)

2、右击res.qrc文件->open in editor,如果打不开则选->open with->资源编辑器,在打开的资源编辑器中,点击添加->前缀->修改前缀为/qss,  再点击添加->添加现有文件->添加上选中我们上面做好的qss文件。完成后效果如下图所示。

3、写程序时需要读取该文件时,右击这个qss文件,选择复制url,即可复制本文件的资源路径,非常方便。




附:如何设置qss语法高亮?百度上有很多相关答案,自行搜索即可。









展开阅读全文

没有更多推荐了,返回首页