Qt 之 样式表的使用——设置样式的方法

一、简述

我们通常在使用Qt开发的过程中都会使用样式表来美化我们的界面,关于如何使用样式表的资料也很多,样式表的使用方法也千变万化。为了搭建一个漂亮的界面那么必须学会如何使用样式表,Qt帮助文档中提供了非常好的例子以及详细介绍,非常适合学习。同时呢,也不能光看文档中是如何设置样式,我们要亲自动手做一遍才能理解得更加透彻,好了闲话不多说,下面就我在日常开发过程中对样式表的使用做一下简单的总结。

二、开始总结

1、先谈谈我们设置样式有几种方法

(a)、最简单,也是最直接——在Qt Designer 中添加样式

这里写图片描述

这里写图片描述 这里写图片描述


我们在编辑框中添加需要的样式即可,然后点击确定我们就可以看到设置的效果了,这里我们只对QPushButton设置了样式,那我们是不是对界面上每个控件都要单独设置样式呢?

当然不需要,我们可以对整个界面设置样式,然后将所有控件的样式都写在其中就可以了。

这里写图片描述

Qt的样式表编辑工具可以帮助我们检验样式是否编写正确。

这里写图片描述

我们看到下面设置的样式有误,并没有检测出来,但是这里的错误只会影响这一条样式无效,而不会导致整个样式无效。我们看到右边这张图片QPushButton,虽然样式写的有问题,但是还是设置了按钮的背景色和字体的大小。所以这里不是所有问题都能检测出来,如果发现设置的样式与显示效果不一致,那就需要好好检查一下样式写的是否正确。

这里写图片描述 这里写图片描述


(b)、在代码中添加样式

// 对单个控件;
ui.pushButton->setStyleSheet("QPushButton{border-radius:5px;background:rgb(150, 190, 60);color:red;font-size:15px;}")

// 对整个界面(包括界面上所有的控件)
this->setStyleSheet("QPushButton{border-radius:5px;background:rgb(150, 190, 60);color:red;font-size:15px; \
QToolButton{border-radius:5px;background:rgb(34, 231, 131);color:brown;font-size:15px;}")
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

在代码中我们直接调用setStyleSheet方法即可对控件或者整个界面设置样式。


(c)、将样式写在文件中,通过读取文件的方式设置样式

将样式保存在MyStyle.qss文件中。

这里写图片描述


通过以下代码将MyStyle.qss文件中的样式读取出来,然后调用setStyleSheet方法设置样式。

void loadStyleSheet(const QString &sheetName)
{
    QFile file(sheetName);
    file.open(QFile::ReadOnly);
    if (file.isOpen())
    {
        QString styleSheet = this->styleSheet();
        styleSheet += QLatin1String(file.readAll());
        this->setStyleSheet(styleSheet);
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

2、再谈谈这几种设置样式方法的优缺点

(a)、最简单,也是最直接——在Qt Designer 中添加样式

优点:通过这种方法我们对于设置完样式可以立马显示出效果(不需要编译再运行),也可以检测当前样式是否编写错误(只能简单判断,并不能对所有情况进行判断)。同时Qt Designer也可以帮助我们快速添加样式,见下图。

这里写图片描述

缺点:个人感觉在Qt Designer中编写样式不是很清晰,尤其是在样式比较多时,不利于检查样式是否编写错误。同时不可以二次修改,即界面显示完毕后无法通过此方法修改界面的样式,只能靠代码去修改。


(b)、在代码中添加样式

优点:此种方法很方便,也很快捷。可以随时设置样式,改变样式,根据不同条件设置不同的样式,而不像第一、第三种方法直接设置固定样式。

缺点:当样式内容较复杂时,不利于查看,同时可能为了编码风格美观需要将样式内容换行等,这样可能会导致样式错误,根本没有效果,导致需要多次调试,浪费不必要的时间。


(c)、将样式写在文件中,通过读取文件的方式设置样式

优点:这种方法在界面样式较复杂时,我们在文件中编写样式,内容比较清晰,样式编写格式错误更加明显。同时也便于修改,同时一些文件编辑器能够自动给出样式输入提示,提供高编码效率。

缺点:一般样式表文件都会加载到程序资源文件中,所以这里需要单独加载一个文件。同时跟第一种方法一样,不可以二次修改,当界面显示完毕后,只能靠调用setStyleSheet方法再次修改。


个人建议

一般来说,我们会将第二种和第三种方法结合起来使用。通常将整个界面的样式写在文件中,在界面初始化时读取并通过setStyleSheet方法设置,如果在显示界面以后,有一些控件需要变换样式的话在代码中可以单独给某一个控件调用setStyleSheet方法进行重新设置样式。同时非常需要注意的一点是,样式的设置以最后一次设置为准,因为每次设置(调用setStyleSheet(“样式”))都会覆盖之前一次设置的样式,或者如果不需要覆盖之前的样式可以这样写:

void setNewStyleSheet(QString styleSheet)
{
    //获取到原来的样式
     QString oldStyleSheet = this->styleSheet();
     styleSheet += oldStyleSheet;
     this->setStyleSheet(styleSheet);
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

第一种方法适合检测我们写的样式有没有错误,能够立即看到效果,如果我们发现在代码中设置样式,总是显示不了效果(每次修改都需要重新编译,耗时),可以现在Qt Designer中测试一下样式是否正确,在Qt Designer中修改正确后可以移至代码中。

这里先简单介绍设置样式的方法,后续文章将继续讲解Qt样式表的使用。

PS : 今天是三八妇女节,一个属于全中国女同胞的节日,公司许多女同事都收到了礼物,享受到了不一般的待遇。强烈要求有一个属于我们广大男同胞的节日,要公平对待嘛,O(∩_∩)O!。

posted @ 2018-02-11 13:47  苍月代表我  阅读(22844)  评论(1编辑  收藏  举报