关于qt5:Qt学习笔记Qt动态切换控件样式属性方法

1 介绍

在编程过程中咱们个别应用 setStyleSheet 函数来设置控件的款式属性，包含色彩、边框、透明度等属性，如果不同的控件和款式间接在代码中设置，会造成无奈对立治理的毛病，重复书写款式属性造成代码的冗余。
解决的办法是将所有须要设置的款式属性都放入 qss 文件中，通过加载 qss 来实现不同控件不同状态下的款式变动。

2 实现过程

如果咱们只设定某些控件的款式属性，能够把款式设置写到 ui 文件下的 styleSheet 下，其在 ui 下设置如下。

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

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 <QMainWindow>

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 成果展现

本我的项目源码仓库