[Qt学习笔记]Qt动态切换控件样式属性方法

1 介绍

在编程过程中我们一般使用setStyleSheet 函数来设置控件的样式属性，包括颜色、边框、透明度等属性，如果不同的控件和样式直接在代码中设置，会造成无法统一管理的缺点，反复书写样式属性造成代码的冗余。
解决的方法是将所有需要设置的样式属性都放入qss文件中，通过加载qss来实现不同控件不同状态下的样式变化。

2 实现过程

如果我们只设定某些控件的样式属性，可以把样式设置写到ui文件下的styleSheet下，其在ui下设置如下。

styleSheet设置.JPG

这里我们设置按钮控件的样式属性，设置按钮默认是蓝色，鼠标停留在上面时按钮变为绿色，鼠标点击颜色为黄色，按钮选中颜色为红色。

QPushButton
{
    color: white;
    background-color: #27a9e3;
    border-width: 0px;
    border-radius: 3px;
}

QPushButton:hover
{
    color: white;
    background-color: #66c011;
    border-width: 0px;
    border-radius: 3px;
}

QPushButton:pressed
{
    color: white;
    background-color: yellow;
    border-width: 0px;
    border-radius: 3px;
}


QPushButton[pagematches=true]
{
    color: white;
    background-color: red;
    border-width: 0px;
    border-radius: 3px;
}

这里主要使用到的函数为setProperty()设置样式，polish()应用新的样式。

mainwindow.h

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include 

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

private slots:
    void on_tabWidget_currentChanged(int index);

    void on_button1_clicked();

    void on_button2_clicked();

    void on_button3_clicked();

private:
    Ui::MainWindow *ui;
};

#endif // MAINWINDOW_H

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    ui->button1->setProperty("pagematches", true);
    ui->tabWidget->setCurrentIndex(0);
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::on_tabWidget_currentChanged(int index)
{
    //清楚所有按钮的选中样式
    ui->button1->setProperty("pagematches", false);
    ui->button2->setProperty("pagematches", false);
    ui->button3->setProperty("pagematches", false);

    // 设置tab对应的按钮选中样式
    if (index == 0)
        ui->button1->setProperty("pagematches", true);
    else if (index == 1)
        ui->button2->setProperty("pagematches", true);
    else
        ui->button3->setProperty("pagematches", true);

    // 每个按钮应用最新的样式设置
    ui->button1->style()->polish(ui->button1);
    ui->button2->style()->polish(ui->button2);
    ui->button3->style()->polish(ui->button3);
}

void MainWindow::on_button1_clicked()
{
    ui->tabWidget->setCurrentWidget(ui->tab1);

}

void MainWindow::on_button2_clicked()
{
    ui->tabWidget->setCurrentWidget(ui->tab2);
}

void MainWindow::on_button3_clicked()
{
    ui->tabWidget->setCurrentWidget(ui->tab3);
}

3 效果展示

样式动态设置.gif

本项目源码仓库