QT 样式表

最新推荐文章于 2024-04-25 15:12:04 发布

双子座断点

最新推荐文章于 2024-04-25 15:12:04 发布

阅读量1.8k

点赞数 3

分类专栏： QT开发之路

本文链接：https://blog.csdn.net/qq_37529913/article/details/108735409

版权

QT开发之路专栏收录该内容

28 篇文章 30 订阅

订阅专栏

前言：

转载请附上连接,本帖原创请勿照抄。

完整版QT使用样式表来对控件样式进行调整。
使用setStyleSheet来进行设置Button样式实例以及源代码、QT样式表属性完整版、QT系统字体、程序示例以及完整原始代码、启动动画示例、QT为按钮、标签添加图片的几种方法、QButton弹出菜单、QT界面换肤解决方案和解决思路。一文搞懂QT样式表。

本文提供了多个按钮样式以及实现代码，并且每个部分有详细示例(提供解决方案和某些其它功能实现的思路以及总结)；

先附QT界面录制的JPG界面图片：

1. QT样式表属性完整版

在正式开始之前先介绍一下样式表属性，自己总结的样式表属性感觉很全面，有不足的地方请留言看到会及时回复。

传送门：https://blog.csdn.net/qq_37529913/article/details/108722774

下面是文章部分截图

2. QT系统字体

传送门：https://blog.csdn.net/qq_37529913/article/details/108725421

下面是文章部分截图

3. 使用setStyleSheet来进行设置Button样式

使用Button按钮来进行演示，其它控件可以类举。

按钮的三种状态
//默认显示样式
ui->pushButton->setStyleSheet("#pushButton{background-color:rgb(134,183,200);border:2px solid #5F92B2;border-radius:5px;color:white;}"
    //hover 鼠标停留样式
    "#pushButton:hover{background-color:rgb(0,130,150);border:2px solid #5F92B2;border-radius:5px;color:white;}"
    //pressed 鼠标点击样式
    "#pushButton:pressed{background-color:rgb(85,170,255);border:2px solid #3C80B1;border-radius:5px;color:white;}"
                                    );

4. 本文用到的代码

4.1 main.cpp

#include "mainwindow.h"

#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();
    return a.exec();
}

4.2 mainwindow.h

主要实现功能在初始化部分实现：

#ifndef MAINWINDOW_H
#define MAINWINDOW_H
//注意包含头文件
#include <QMainWindow>
#include <QString>
#include <QMessageBox>
#include <QPushButton>
#include <QGraphicsDropShadowEffect>
#include <QIcon>
#include <QGridLayout>

QT_BEGIN_NAMESPACE
namespace Ui { class MainWindow; }
QT_END_NAMESPACE

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = nullptr);
    ~MainWindow();

private slots:
    void on_pushButton_clicked();

    void on_textEdit_copyAvailable(bool b);

    void on_pushBut_2_clicked();

    void on_Button_BG_B_clicked();

    void on_Button_BG_W_clicked();

    void on_pushButton_2_clicked();

    void on_pushButton_3_clicked();

    void on_pushButton_4_clicked();

    void on_pushButton_5_clicked();

    void on_pushButton_6_clicked();

    void on_pushButton_7_clicked();

    void on_pushButton_8_clicked();

private:
    Ui::MainWindow *ui;
};
#endif // MAINWINDOW_H

4.3 mainwindow.cpp

在这里设置的时候如果找不到自己想要的样式可以点击 https://blog.csdn.net/qq_37529913/article/details/108722774 进行查找。

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

#pragma execution_character_set("utf-8")
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    //说明
    //background-color: red 背景色  color:rgb 字体背景色   border-radius: 字体圆角
    //"#pushButton:hover{background-color:white; color: black;}"

    //示例BUT
    ui->pushButton->setStyleSheet("#pushButton{border-radius: 10px;color:rgb(0,255,127);border:1px solid rgb(0,255,127);}");
    /*ui->pushButton->setStyleSheet("QPushButton{background-color:black;\
        color: white;   border-radius: 10px;  border: 2px groove gray;\
        border-style: outset;}"
        "QPushButton:hover{background-color:white; color: black;}"
        "QPushButton:pressed{background-color:rgb(85, 170, 255);\border-style: inset; }"
        );*/
    //"#pushButton{border-radius: 10px;color:rgb(255, 255, 255);}"
    //"#pushButton:pressed{background-color:rgb(85, 170, 255);}"

    //黑色背景按钮
    ui->Button_BG_B->setStyleSheet("#Button_BG_B{border-radius: 10px;color:rgb(72,61,139);border:1px solid rgb(199,21,133);}"
                                    "#Button_BG_B:hover{background-color:rgb(0,0,0);color:rgb(255,255,255);}"
                                   );
    //白色背景按钮
    ui->Button_BG_W->setStyleSheet("#Button_BG_W{border-radius: 10px;color:rgb(72,61,139);border:1px solid rgb(199,21,133);}"
                                    "#Button_BG_W:hover{background-color:rgb(255,255,255);color:rgb(0,0,0);}"
                                   );
    //设置text字体固定颜色
    QFont textEditFont ( "Microsoft YaHei", 10, 75); //第一个属性是字体（微软雅黑），第二个是大小，第三个是加粗（权重是75）
    ui->textEdit->setFont(textEditFont);
    ui->textEdit->setStyleSheet("#textEdit{color:rgb(85, 170, 255);}");
    //ui->textEdit->setStyleSheet("#textEdit{border-radius: 10px;color:rgb(85, 170, 255);font: 75 16pt;font-weight: 100 16pt;}");
    QString strTemp="这是第一行字";
    ui->textEdit->insertPlainText(strTemp+='\n');
    strTemp="这是第二行字";
    ui->textEdit->insertPlainText(strTemp+='\n');
    strTemp="这是第三行字";
    ui->textEdit->insertPlainText(strTemp+='\n');

    //按钮图标
    //ui->pushButton_3->setStyleSheet(tr("background-image: url(:logo.png);"));
    QIcon icon;
    icon.addFile(tr("./logo.png"));
    ui->pushButton_3->setIcon(icon);

    //阴影效果按钮
    QGraphicsDropShadowEffect *effect = new QGraphicsDropShadowEffect;
    effect->setBlurRadius(8);
    // 阴影圆角的大小
    //Qt::gray QColor(RGBA)
    effect->setColor(QColor(45, 45, 46, 90));      //阴影的颜色
    effect->setOffset(5,5);          //阴影的偏移量
    ui->pushButton_2->setGraphicsEffect(effect); //给那个控件设置阴影，这里需要注意的是所有此控件的子控件，

    //hover 鼠标停留样式 pressed 鼠标点击样式
    ui->pushButton_4->setStyleSheet("#pushButton_4{background-color:rgb(134,183,200);border:2px solid #5F92B2;border-radius:5px;color:white;}"
                                    "#pushButton_4:hover{background-color:rgb(0,130,150);border:2px solid #5F92B2;border-radius:5px;color:white;}"
                                    "#pushButton_4:pressed{background-color:rgb(85,170,255);border:2px solid #3C80B1;border-radius:5px;color:white;}"
                                    );
    ui->pushButton_6->setStyleSheet("#pushButton_6{border: 1px solid #333333;padding: 4px;min-width: 65px;min-height: 12px;}"
                                    "#pushButton_6:hover{background-color: #333333;border-color: #444444;}"
                                    "#pushButton_6:pressed{background-color: #111111;border-color: #333333;color: yellow;}"
                                    );
    ui->pushButton_7->setStyleSheet("#pushButton_7{color:white;background-color:rgb(14 , 150 , 254);border-radius:5px;}"
                                    "#pushButton_7:hover{color:white;background-color:rgb(44 , 137 , 255);}"
                                    "#pushButton_7:pressed{color:white;background-color:rgb(14 , 135 , 228);padding-left:3px;padding-top:3px;}"
                                    );
    //弹出菜单
    QMenu *menu = new QMenu;
    menu->addAction("Open Item");
    menu->addAction("Save Item");
    menu->addMenu("More Item");
    menu->addSeparator();
    menu->addAction("Close Item");
    ui->pushButton_5->setMenu(menu);
}

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


void MainWindow::on_pushButton_clicked()
{
    QMessageBox::about(NULL, "About", "确定");

}


void MainWindow::on_pushBut_2_clicked()
{
    QMessageBox::about(NULL, "About", "取消");
}


void MainWindow::on_textEdit_copyAvailable(bool b)
{

}
//黑色背景
void MainWindow::on_Button_BG_B_clicked()
{
    this->setStyleSheet("background-color:rgb(45,45,46)");
}
//白色背景
void MainWindow::on_Button_BG_W_clicked()
{
    this->setStyleSheet("background-color:rgb(250,250,250)");
}
//阴影效果
void MainWindow::on_pushButton_2_clicked()
{

}
//图标
void MainWindow::on_pushButton_3_clicked()
{

}

void MainWindow::on_pushButton_4_clicked()
{

}

void MainWindow::on_pushButton_5_clicked()
{

}

void MainWindow::on_pushButton_6_clicked()
{

}

void MainWindow::on_pushButton_7_clicked()
{

}

void MainWindow::on_pushButton_8_clicked()
{

}

5. 启动动画

可以借鉴：https://blog.csdn.net/u012160436/article/details/41624427

6. QT为按钮、标签添加图片的几种方法

借鉴自：https://blog.csdn.net/lmhuanying1012/article/details/78328007

7. QButton弹出菜单

    //弹出菜单
    QMenu *menu = new QMenu;
    menu->addAction("Open Item");
    menu->addAction("Save Item");
    menu->addMenu("More Item");
    menu->addSeparator();
    menu->addAction("Close Item");
    ui->pushButton_5->setMenu(menu);

8. QT界面换肤解决方案和解决思路

/*
*通过点击按钮来切换皮肤
*换肤涉及到整套的控件皮肤颜色的更换
*所以准备在后期的QT控件重绘文章来进行具体举例
*QSS样式和控件重绘会放在一章节来讲述
*/
//黑色背景按钮
ui->Button_BG_B->setStyleSheet("#Button_BG_B{border-radius: 10px;color:rgb(72,61,139);border:1px solid rgb(199,21,133);}"
                                    "#Button_BG_B:hover{background-color:rgb(0,0,0);color:rgb(255,255,255);}"
                                   );
//白色背景按钮
ui->Button_BG_W->setStyleSheet("#Button_BG_W{border-radius: 10px;color:rgb(72,61,139);border:1px solid rgb(199,21,133);}"
                                    "#Button_BG_W:hover{background-color:rgb(255,255,255);color:rgb(0,0,0);}"
                                   );

9. 结语

TCP\UDP\IP文章(好文推荐，看了就忍不住接着看下去的文章)

这么多记不住怎么办，赶紧点收藏呀~，页面右下角五角星收藏。

传送门：https://blog.csdn.net/qq_37529913/article/details/106765916