【QT入门】 自定义标题栏界面qss美化+按钮功能实现

往期回顾:

【QT入门】 鼠标按下和移动事件实现无边框窗口拖动-CSDN博客
【QT入门】 设计实现无边框窗口拉伸的公用类-CSDN博客
【QT入门】对无边框窗口自定义标题栏并实现拖动和拉伸效果-CSDN博客

 【QT入门】 自定义标题栏界面qss美化+按钮功能实现

一、最终效果

二、qss样式美化 

1、实现悬浮样式改变

    m_closeBtn = new QPushButton(this);
    m_closeBtn->setFixedSize(32, 32);
    m_closeBtn->setStyleSheet("QPushButton{background-image:url(:/_3_ListWidgetPro/resources/titlebar/close.svg);border:none}" \
        "QPushButton:hover{" \
        "background-color:rgb(99, 99, 99);" \
        "background-image:url(:/_3_ListWidgetPro/resources/titlebar/close_hover.svg);border:none;}");

当鼠标悬浮到该按钮上时,样式会有一定改变。

2、添加弹簧实现固定间距

创建QSpacerItem对象,给标题栏右边的几个按钮设置固定间距,保证在窗口放大的时候依旧是相同间距。这一点还是很关键的,否则用户体验会比较差。

    QHBoxLayout* pHlay = new QHBoxLayout(this);
    pHlay->addWidget(m_pLogo);
    pHlay->addWidget(m_pTitle);
    pHlay->addStretch();//添加了一个弹簧到水平布局pHlay中,弹簧会随着窗口大小变化而比变化

    pHlay->addWidget(m_setBtn);
    //创建了一个固定大小的QSpacerItem对象,宽度为20,高度为20。
    //使用QSizePolicy::Fixed参数指定了固定的策略,表示该间距在布局中不会随着布局的大小变化而变化。
    QSpacerItem* pItem1 = new QSpacerItem(20, 20, QSizePolicy::Fixed, QSizePolicy::Fixed);
    //将这个QSpacerItem对象pItem1添加到水平布局pHlay中,这样在布局中就会有一个固定大小的间距。
    pHlay->addSpacerItem(pItem1);
2.1区分两个弹簧的使用 

这里注意,看用的两个不同控件:

1、pHlay->addStretch();

添加了一个弹簧到水平布局里,这个弹簧会随着窗口大小的变化而变化,这里是必须要用这个的,因为窗口变大后中间区域肯定会增加。

 2、QSpacerItem* pItem1 = new QSpacerItem(20, 20, QSizePolicy::Fixed, QSizePolicy::Fixed);

这里是创建了一个固定大小的QSpacerItem对象,宽度为20,高度为20。
使用QSizePolicy::Fixed参数指定了固定的策略,表示该间距在布局中不会随着布局的大小变化而变化。然后将这个QSpacerItem对象pItem1添加到水平布局pHlay中,这样在布局中就会有一个固定大小的间距。 

这里是必须要用这个,很简单的道理,不管窗口扩大或者缩小,右上角那三个最小化、最大化、关闭按钮的间隙是不能变的。

 2.2注意一个bug

由于我设置固定间距的三个弹簧大小长宽都是一样的,此时就会有这样一个想法,能不能只创建一个,就只用这一个?

答案是不行的,我试了然后就崩了。原因很简单,弹簧这个QSpacerItem类型对象是new出来的,最后qt内部会进行析构,我多次使用,也就意味着qt对多次析构,但是从第二次开始就为空了,此时再析构,就崩了。

   QSpacerItem* pItem3 = new QSpacerItem(18, 20, QSizePolicy::Fixed, QSizePolicy::Fixed);
    pHlay->addSpacerItem(pItem3);   // 弹簧每次使用时得new出来,不能重复使用
    //因为qt内部每次执行代码后会对new出来的对象进行析构,如果说我这里重复使用弹簧pItem2,
    //那么就意味着pItem2会被析构两次,所以就会崩溃;

三、按钮逻辑实现 

1、多个信号连接同一个槽

首先是在initUI类里用多个信号连接同一个槽函数

    connect(m_minBtn, &QPushButton::clicked, this, &CTitleBar::onClicked);
    connect(m_maxBtn, &QPushButton::clicked, this, &CTitleBar::onClicked);
    connect(m_closeBtn, &QPushButton::clicked, this, &CTitleBar::onClicked);

2、实现槽函数

先把鼠标点击对象转换成btn,注意看转换方式,然后获取父窗口指针,开始用if语句判断。

    QPushButton* pButton = qobject_cast<QPushButton*>(sender()); //把鼠标点击的对象转换为btn

    QWidget* pWindow = this->window(); //标题栏获得当前的父窗口指针对象
2.1最小化按钮

最小化按钮直接执行最小化 

 if (pButton == m_minBtn)
    {
        pWindow->showMinimized();
    }
2.2最大化按钮

最大化按钮要先判断,因为此时可能已经最大化,可能还是正常大小,两者对应的最大化按钮的图片是不一样的,如果已经最大化,执行pWindow->showNormal(),如果正常大小,则执行最大化。

    else if (pButton == m_maxBtn)
    {
        if (pWindow->isMaximized())
        {
            pWindow->showNormal();
            m_maxBtn->setStyleSheet("QPushButton{background-image:url(:/_3_ListWidgetPro/resources/titlebar/normal.svg);border:none}" \
                "QPushButton:hover{" \
                "background-color:rgb(99, 99, 99);" \
                "background-image:url(:/_3_ListWidgetPro/resources/titlebar/normal_hover.svg);border:none;}");
        }
        else
        {
            pWindow->showMaximized();
            m_maxBtn->setStyleSheet("QPushButton{background-image:url(:/_3_ListWidgetPro/resources/titlebar/max.svg);border:none}" \
                "QPushButton:hover{" \
                "background-color:rgb(99, 99, 99);" \
                "background-image:url(:/_3_ListWidgetPro/resources/titlebar/max_hover.svg);border:none;}");
        }
    }
2.3关闭按钮

最后是关闭按钮,如果是关闭,则发送关闭信号,这里可以选择直接pWindow->close();也是能实现关闭功能,我们做更复杂一点,被点击后发送一个关闭信号

    else if (pButton == m_closeBtn)
    {
        emit sig_close();
        //pWindow->close();
    }

 在主函数的initUI方法里捕捉这个方法

  connect(m_pTitleBar, &CTitleBar::sig_close, this, &_3_ListWidgetPro::on_closeSlot);

然后执行相应的槽函数

void  _3_ListWidgetPro::on_closeSlot()
{
    QMessageBox::StandardButton _exit = QMessageBox::warning(this, u8"提示", u8"确定要退出吗",
        QMessageBox::Yes | QMessageBox::No, QMessageBox::Yes);

    if (_exit == QMessageBox::Yes)
    {
        close();
    }
}

实现当用户点击关闭按钮时,弹出一个对话框提醒是否确定退出,确定后直接close()。

 四、完整示例代码

1、CTitleBar.h

#pragma once
#include <QtWidgets/QWidget>
#include <QLabel>
#include <QPushButton>


class CTitleBar: public QWidget
{

    Q_OBJECT

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

private:
    void mousePressEvent(QMouseEvent* event) override;
    void mouseDoubleClickEvent(QMouseEvent* event) override;

private slots:
    void onClicked();

signals:
    void sig_close();

private:    
    void initUi();

private :
    QLabel* m_pLogo;
    QLabel* m_pTitle;

    QPushButton* m_setBtn;
    QPushButton* m_minBtn;
    QPushButton* m_maxBtn;
    QPushButton* m_closeBtn;
};

2、CTitleBar.cpp

#include "CTitleBar.h"
#include <QHBoxLayout>
#include <qt_windows.h>
#include <QMouseEvent>
#include <QWidget>
#include <QSpacerItem>
#pragma comment(lib, "user32.lib")

CTitleBar::CTitleBar(QWidget* parent)
    : QWidget(parent)
{
    //在窗口关闭时自动删除窗口对象,即在调用close()函数关闭窗口时,窗口对象会被自动删除,释放内存。
    this->setAttribute(Qt::WA_DeleteOnClose);

    initUi();
}

CTitleBar::~CTitleBar()
{
}

void CTitleBar::initUi()
{

    //有些时候子窗口颜色会被父类窗口给替换掉
    //为了避免这种影响,禁止父窗口影响子窗口样式
    setAttribute(Qt::WA_StyledBackground);
    this->setFixedHeight(32 + 5 * 2);

    this->setStyleSheet("background-color:rgb(0,122,122)");

    //QLabel* m_pLogo;
    //QLabel* m_pTitle;
    //QPushButton* m_minBtn;
    //QPushButton* m_maxBtn;
    //QPushButton* m_closeBtn;

    m_pLogo = new QLabel(this);
    m_pLogo->setFixedSize(32, 32);  
    m_pLogo->setStyleSheet("background-image:url(:/_3_ListWidgetPro/resources/titlebar/title_icon.png);border:none");


    m_pTitle = new QLabel(this);
    m_pTitle->setText(u8"我是标题");
    m_pTitle->setFixedWidth(120);
    m_pTitle->setStyleSheet("QLabel{font-family: Microsoft YaHei; \
		font-size:18px; \
		color:#BDC8E2;background-color:rgb(0,122,122);}");
    

    m_setBtn = new QPushButton(this);
    m_setBtn->setFixedSize(32, 32);
    m_setBtn->setStyleSheet("QPushButton{background-image:url(:/_3_ListWidgetPro/resources/titlebar/set.svg);border:none}" \
        "QPushButton:hover{" \
        "background-color:rgb(99, 99, 99);" \
        "background-image:url(:/_3_ListWidgetPro/resources/titlebar/set_hover.svg);border:none;}");

    m_minBtn = new QPushButton(this);
    m_minBtn->setFixedSize(32, 32);
    m_minBtn->setStyleSheet("QPushButton{background-image:url(:/_3_ListWidgetPro/resources/titlebar/min.svg);border:none}" \
        "QPushButton:hover{" \
        "background-color:rgb(99, 99, 99);" \
        "background-image:url(:/_3_ListWidgetPro/resources/titlebar/min_hover.svg);border:none;}");

    m_maxBtn = new QPushButton(this);
    m_maxBtn->setFixedSize(32, 32);
    m_maxBtn->setStyleSheet("QPushButton{background-image:url(:/_3_ListWidgetPro/resources/titlebar/normal.svg);border:none}" \
        "QPushButton:hover{" \
        "background-color:rgb(99, 99, 99);" \
        "background-image:url(:/_3_ListWidgetPro/resources/titlebar/normal_hover.svg);border:none;}");

    m_closeBtn = new QPushButton(this);
    m_closeBtn->setFixedSize(32, 32);
    m_closeBtn->setStyleSheet("QPushButton{background-image:url(:/_3_ListWidgetPro/resources/titlebar/close.svg);border:none}" \
        "QPushButton:hover{" \
        "background-color:rgb(99, 99, 99);" \
        "background-image:url(:/_3_ListWidgetPro/resources/titlebar/close_hover.svg);border:none;}");

    QHBoxLayout* pHlay = new QHBoxLayout(this);
    pHlay->addWidget(m_pLogo);
    pHlay->addWidget(m_pTitle);
    pHlay->addStretch();//添加了一个弹簧到水平布局pHlay中,弹簧会随着窗口大小变化而比变化

    pHlay->addWidget(m_setBtn);
    //创建了一个固定大小的QSpacerItem对象,宽度为20,高度为20。
    //使用QSizePolicy::Fixed参数指定了固定的策略,表示该间距在布局中不会随着布局的大小变化而变化。
    QSpacerItem* pItem1 = new QSpacerItem(20, 20, QSizePolicy::Fixed, QSizePolicy::Fixed);
    //将这个QSpacerItem对象pItem1添加到水平布局pHlay中,这样在布局中就会有一个固定大小的间距。
    pHlay->addSpacerItem(pItem1);

    pHlay->addWidget(m_minBtn);
    QSpacerItem* pItem2 = new QSpacerItem(18, 20, QSizePolicy::Fixed, QSizePolicy::Fixed);
    pHlay->addSpacerItem(pItem2);
    pHlay->addWidget(m_maxBtn);

    QSpacerItem* pItem3 = new QSpacerItem(18, 20, QSizePolicy::Fixed, QSizePolicy::Fixed);
    pHlay->addSpacerItem(pItem3);   // 弹簧每次使用时得new出来,不能重复使用
    //因为qt内部每次执行代码后会对new出来的对象进行析构,如果说我这里重复使用弹簧pItem2,
    //那么就意味着pItem2会被析构两次,所以就会崩溃;
    pHlay->addWidget(m_closeBtn);

    pHlay->setContentsMargins(5, 5, 5, 5);

    connect(m_minBtn, &QPushButton::clicked, this, &CTitleBar::onClicked);
    connect(m_maxBtn, &QPushButton::clicked, this, &CTitleBar::onClicked);
    connect(m_closeBtn, &QPushButton::clicked, this, &CTitleBar::onClicked);

}

//实现鼠标点击自定义标题栏实现窗口拖拽效果
void  CTitleBar::mousePressEvent(QMouseEvent* event)
{
    //ReleaseCapture函数用于释放鼠标捕获
    if (ReleaseCapture())
    { 
        QWidget* pWindow = this->window(); //获取当前CTitleBar所属的窗口对象。
    if (pWindow->isTopLevel()) //检查窗口是否为顶层窗口,即主窗口
    {
        //发送系统命令消息,通过SC_MOVE + HTCAPTION参数实现拖动窗口的效果。
        //SC_MOVE表示移动窗口,HTCAPTION表示鼠标在窗口标题栏区域按下。
        SendMessage(HWND(pWindow->winId()), WM_SYSCOMMAND, SC_MOVE+ HTCAPTION, 0);
    }
    }
}

void CTitleBar::mouseDoubleClickEvent(QMouseEvent* event)
{
    emit m_maxBtn->clicked();
}


void CTitleBar::onClicked()
{
    QPushButton* pButton = qobject_cast<QPushButton*>(sender()); //把鼠标点击的对象转换为btn

    QWidget* pWindow = this->window(); //标题栏获得当前的父窗口指针对象

    if (pButton == m_minBtn)
    {
        pWindow->showMinimized();
    }
    else if (pButton == m_maxBtn)
    {
        if (pWindow->isMaximized())
        {
            pWindow->showNormal();
            m_maxBtn->setStyleSheet("QPushButton{background-image:url(:/_3_ListWidgetPro/resources/titlebar/normal.svg);border:none}" \
                "QPushButton:hover{" \
                "background-color:rgb(99, 99, 99);" \
                "background-image:url(:/_3_ListWidgetPro/resources/titlebar/normal_hover.svg);border:none;}");
        }
        else
        {
            pWindow->showMaximized();
            m_maxBtn->setStyleSheet("QPushButton{background-image:url(:/_3_ListWidgetPro/resources/titlebar/max.svg);border:none}" \
                "QPushButton:hover{" \
                "background-color:rgb(99, 99, 99);" \
                "background-image:url(:/_3_ListWidgetPro/resources/titlebar/max_hover.svg);border:none;}");
        }
    }
    else if (pButton == m_closeBtn)
    {
        emit sig_close();
        //pWindow->close();
    }

}

都看到这里了,点个赞再走呗朋友~

加油吧,预祝大家变得更强!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/514658.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Linux简单介绍

Linux简单介绍 编译器VMware虚拟机Ubuntu——LinuxOS为什么使用LinuxOS&#xff1f; 目录结构Windows目录结构Linux操作系统home是不是家目录&#xff1f; Linux常用命令终端命令行提示符与权限切换命令tab 作用&#xff1a;自动补全上下箭头pwd命令ls命令mkdir命令touch命令rm…

Vue 大文件切片上传实现指南包会,含【并发上传切片,断点续传,服务器合并切片,计算文件MD5,上传进度显示,秒传】等功能

Vue 大文件切片上传实现指南 背景 在Web开发中&#xff0c;文件上传是一个常见的功能需求&#xff0c;尤其是当涉及到大文件上传时&#xff0c;为了提高上传的稳定性和效率&#xff0c;文件切片上传技术便显得尤为重要。通过将大文件切分成多个小块&#xff08;切片&#xff0…

小程序滑动删除组件+全选批量删除组件+附源码

小程序滑动删除组件全选批量删除组件附源码 说明 使用 uni-app、uview 组件开发&#xff0c;全端&#xff08;微信小程序、QQ小程序、抖音小程序等等&#xff09; 支持滑动删除组件、支持左滑删除、长按进入批量删除、全选删除、长按弹窗删除、 组件式开发&#xff0c;文章…

LabVIEW太赫兹波扫描成像系统

LabVIEW太赫兹波扫描成像系统 随着科技的不断发展&#xff0c;太赫兹波成像技术因其非电离性、高穿透性和高分辨率等特点&#xff0c;在生物医学、材料质量无损检测以及公共安全等领域得到了广泛的应用。然而&#xff0c;在实际操作中&#xff0c;封闭性较高的信号采集软件限制…

Leetcode 674. 最长连续递增序列

心路历程&#xff1a; 这道题和递增子序列的一样&#xff0c;由于题目中要求连续&#xff0c;实际上会让状态转移更加简单&#xff0c;因为候选的动作集合相当于更小了。 状态&#xff1a;nums的区间[0, i]&#xff0c;第i个元素和第i-1个元素的大小关系 动作&#xff1a;是否…

Vue3_2024_7天【回顾上篇watch常见的后两种场景】___续

Vue3中监听多条数据的两种使用 1.watch【使用上一章写法&#xff0c;监听两个属性&#xff0c;然后执行相应操作…】 2.watchEffect【相对于使用watch&#xff0c;watchEffect默认页面初始加载&#xff0c;有点类似加配置&#xff1a;立即执行 immediate】 代码&#xff1a; …

无熟人难办事?--迪米特法则

1.1 第一天上班 第一天上班&#xff0c;电脑安装工作但是安装的同事小张刚巧有事要忙&#xff0c;主管有事也出去了&#xff0c;没有人搭理。小张快下班的时候才回来&#xff0c;开始帮我装系统&#xff0c;加域&#xff0c;设置密码等。 1.2 无熟人难办事 管理上出了问题&a…

文献阅读:将条形码神经解剖学与空间转录分析相结合,可以识别投射神经元相关基因

文献介绍 「文献题目」 Integrating barcoded neuroanatomy with spatial transcriptional profiling enables identification of gene correlates of projections 「研究团队」 Anthony M. Zador&#xff08;美国冷泉港实验室&#xff09; 「发表时间」 2021-05-10 「发表期…

Rust---复合数据类型之枚举、数组

目录 枚举的使用Option 枚举数组的使用输出结果 枚举&#xff08;Enum&#xff09;&#xff1a;表示一个类型可以有多个不同的取值。枚举类型可以包含不同的变体&#xff08;variants&#xff09;&#xff0c;每个变体可以有不同的数据类型。 枚举的使用 enum Direction {Up,…

[QOpenGLWidget+QMouseEvent]实时绘制长方形

复现moho-打卡第1天 - 20240402 1.1--QOpenGLWidget中显示长方形 实现方法&#xff1a;顶点着色器中给定长方形的四个顶点数据&#xff0c;代码如下&#xff1a; // 顶点位置 GLfloat vertics[1][4][3] { {{mousePressPosX,mousePressPosY,0.0},{mousePressPosX,mouseMoveP…

hexo博客7:构建简单的多层安全防御体系

【hexo博客7】构建简单的多层安全防御体系 写在最前面理解全面安全策略的重要性防御常见的网络攻击1. SQL注入攻击2. 文件上传漏洞3. 跨站脚本攻击&#xff08;XSS&#xff09;4. 跨站请求伪造&#xff08;CSRF&#xff09;5. 目录遍历/本地文件包含&#xff08;LFI/RFI&#x…

CAN的协议层

CAN属于异步通讯&#xff0c;没有时钟信号线&#xff0c;连接在同一个总线网络中的各个节点会像串口异步通讯那样&#xff0c;节点间使用约定好的波特率进行通信&#xff0c;特别的&#xff0c;CAN还会使用“位同步”的方式来抗干扰&#xff0c;吸收误差&#xff0c;实现对总线…

Docker实战教程 第2章 Docker基础

3-1 Docker介绍 什么是Docker 虚拟化&#xff0c;容器 Docker 是一个开源的应用容器引擎&#xff0c;基于 Go 语言 并遵从Apache2.0协议开源。 Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中&#xff0c;然后发布到任何流行的 Linux 机器上&…

【活动预告】SLMOps 系列(三)|SLMOps 的最后一公里 - 模型评估技巧

点击蓝字 关注我们 编辑&#xff1a;Alan Wang 排版&#xff1a;Rani Sun 2023年&#xff0c;Azure OpenAI Service 引领了 AI 2.0 时代的热潮&#xff0c;各行业企业都在 AI 模型的探索与应用中持续发力。相比复杂度更高的大模型&#xff0c;有时候轻量且高效的小模型&#xf…

【windows自带exe】使用`findstr.exe`来搜索包含某个字符串的文件

【windows自带exe】使用findstr.exe来搜索包含某个字符串的文件 写在最前面什么是findstr.exe?如何使用findstr.exe查找文件中的字符串&#xff1f;示例&#xff1a;查找JSP文件中包含"jsonp"的文件 注意事项小结 &#x1f308;你好呀&#xff01;我是 是Yu欸 &…

基于Python的简单颜色替换

当我们临时需要改变一个照片的颜色&#xff0c;使其符合我们想要的主题色时&#xff0c;对于不会PS的我就只能使用一下Python来实现这个简单的过程 比如我想要中国农大农学院的院徽&#xff0c;但在官网上提取出来的图片是白色的 而我想要符合农学主题的绿色&#xff0c;将图片…

go juc 线程中的子类

1.go test() 主死随从 package mainimport ("fmt""strconv""time" )func test() {for i : 1; i < 10; i {fmt.Println("hello " strconv.Itoa(i))//阻塞time.Sleep(time.Second)} } func main() {//开启协程go test()for i : 1; …

使用pip安装geopandas(24.4更新)

geopandas是我们用Python进行地理分析常用的库&#xff0c;在数据处理、分析、制图等场景中有着极为广泛的应用&#xff0c;但是在安装过程中会出现各种问题。​geopandas的安装方式有很多&#xff0c;今天我们选取较为简单的pip来进行geopandas的安装。 ​首先&#xff0c;我…

Java多态世界(day18)

多态&#xff1a;重写的方法调用和执行 1.静态绑定&#xff1a;编译器在父类中找方法&#xff0c;如&#xff1a; 上面的eat&#xff08;&#xff09;方法是先在父类中找方法&#xff0c;父类没有的话&#xff0c;就算子类有编译也会报错。&#xff08;如果引用方法在父类中存…

深度学习:神经网络模型的剪枝和压缩简述

深度学习的神经网路的剪枝和压缩&#xff0c;大致的简述&#xff0c; 主要采用&#xff1a; network slimming&#xff0c;瘦身网络... 深度学习网络&#xff0c;压缩的主要方式&#xff1a; 1.剪枝&#xff0c;nerwork pruing&#xff0c; 2.稀疏表示&#xff0c;sparse rep…