QT---通过样式表设计程序界面ui

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sunny_hu92/article/details/80167962

         在qt中单单是采用qt提供的控件设计出来的程序界面是不堪入目的，是远远不够的。程序使用者们都是希望有一个更好看的ui界面，获得良好的体验。所以往往需要自己设计的图标代替qt自身提供的控件。我这里推荐一个较为方便的方式---通过样式表设计ui界面。

比如qt中我们最常用到的QPushButton类，我们可以作出如下改变：

如上图所示，我对几个QPushButton类进行了改变，使其看起来不会很生硬。经过以下几个步骤就可以实现：

1. 在项目中添加新的资源文件，将所用到的ui界面图标放到资源文件夹中，比如我放置的路径是在:/images/...下；

2. 打开×××.ui文件，右键一个QPushButton 后选择“改变样式表”->添加资源（旁边的下三角形）->border-image，然后在资源文件夹images下选择对应的图标文件，如下图所示：

3. 在***.cpp文件中加入ui初始化的代码说明，比如：

    ui->pushButton_volSub->setStyleSheet("QPushButton{border-image: url(:/images/14-02.png)}"
                                                                   "QPushButton:pressed{border-image: url(:/images/14-01.png)}");

    ui->pushButton_volAdd->setStyleSheet("QPushButton{border-image: url(:/images/16-02.png)}"
                                                                   "QPushButton:pressed{border-image: url(:/images/16-01.png)}");

如上我设置的就是音量加减图标的 一个点击效果，点击一次切换一下图标，以此来表示触发了一次音量加（或是减）的事件。

或是控件可用和不可用状态下，呈现出不同的样式：

        ui->pushButton_1->setEnabled(true);
        ui->pushButton_1->setStyleSheet("QPushButton{border-image: url(:/images/81.png);}");
        ui->pushButton_2->setEnabled(false);
        ui->pushButton_2->setStyleSheet("QPushButton{border-image: url(:/images/67.png);}");

还有比如需要一个 QLabel去除它的外框，并且是其字体的颜色为白色（可以根据需要随意设置），可以：

    ui->label->setStyleSheet("border: none; color: rgb(255, 255, 255);");

注意：最好设置控件的尺寸和图标的尺寸一致，不会导致图标变形，避免影响美观。

这是一种直接通过改变ui文件中控件的样式表来设计界面，相对而言比较简单。

顺便一提，如果要改变应用的背景，可以使用如下代码：

//背景
    QPalette palette;
    palette.setBrush(QPalette::Background, QBrush(QImage(":/images/01.png")));
    this->setPalette(palette);

还有隐藏控件或是全屏显示，可以：

    //隐藏QSlider
        ui->verticalSlider->setHidden(true);
    //全屏显示
        showFullScreen();