27、Qt自定义标题栏

于 2024-05-10 20:55:28 发布
阅读量774 收藏 5
点赞数 10
分类专栏： Qt小功能 文章标签： qt 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Viciower/article/details/138680864
版权

一、说明

QtWidget及其子类有默认的标题栏，但是这个标题栏不能美化，有时候满足不了我们的使用需求，所以进行自定义标题栏

二、下载图标

在下面的链接中下载两种颜色的最大化、向下还原、最大化和关闭八个图片，并找一张当做图标的图片

iconfont-阿里巴巴矢量图标库

 

三、新建项目

新建Qt项目

更改项目名称和位置

选择编译器

基类选择QWidget；

默认

把刚才下载的图片拷贝到工程目录下

右击项目名称，选择“Add New”

选择如下模板

输入名称

默认

选择添加、添加前缀

清空前缀中的原有内容

选择添加、添加文件

选择拷贝过来的所以图片

Ctrl+S保存

四、创建自定义类

选择“C++ Class"模板

基类选择QWidget

默认

更改mytitlebar.h中的代码

#ifndef MYTITLEBAR_H
#define MYTITLEBAR_H

#include <QMainWindow>
#include <QWidget>
#include <QLabel>
#include <QPushButton>

class MyTitleBar : public QWidget
{
    Q_OBJECT
public:
    explicit MyTitleBar(QWidget *parent = nullptr);

    void setColor(QString backgroundColor, QString fontColor, QString selectedFontColor); //设置颜色
protected:

    //界面拖动
    void mousePressEvent(QMouseEvent* event); //鼠标按下

    void mouseMoveEvent(QMouseEvent* event); //鼠标移动

    void mouseReleaseEvent(QMouseEvent* event); //鼠标抬起

    void mouseDoubleClickEvent(QMouseEvent* event); //双击标题栏进行界面的最大化/还原

    bool eventFilter(QObject *obj, QEvent *event); //事件过滤器

private slots:

    void onClicked(); //进行最小化、最大化/还原、关闭操作

    void updateMaximize(); //最大化/还原

private:
    QLabel* m_iconLabel; //显示图标
    QLabel* m_titleLabel; //显示标题
    QPushButton* m_minimizeButton; //最小化按键
    QPushButton* m_maximizeButton; //最大化/还原按键
    QPushButton* m_closeButton; //关闭按键

    QPoint m_mousePosition; //鼠标按下时的位置
    bool m_isMousePressed; //鼠标是否摁下
};

#endif // MYTITLEBAR_H

更改mytitlebar.cpp中的代码

#include "mytitlebar.h"
#include <QHBoxLayout>
#include <QEvent>
#include <QMouseEvent>
#include <QApplication>

MyTitleBar::MyTitleBar(QWidget *parent) : QWidget(parent)
{
    setFixedHeight(30);

    //控件初始化
    m_iconLabel = new QLabel(this);
    m_titleLabel = new QLabel(this);
    m_minimizeButton = new QPushButton(this);
    m_maximizeButton = new QPushButton(this);
    m_closeButton = new QPushButton(this);

    //图片自适应控件大小
    m_iconLabel->setFixedSize(20, 20);
    m_iconLabel->setScaledContents(true);

    //设置控件在布局（layout）里面的大小变化的属性
    m_titleLabel->setMinimumHeight(25);
    m_titleLabel->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
    m_titleLabel->setAlignment(Qt::AlignCenter); //居中

    //设置控件的最小大小和最大大小
    m_minimizeButton->setFixedSize(30, 25);
    m_maximizeButton->setFixedSize(30, 25);
    m_closeButton->setFixedSize(30, 25);

    //设置控件唯一标识符
    m_titleLabel->setObjectName("whiteLabel");
    m_minimizeButton->setObjectName("minimizeButton");
    m_maximizeButton->setObjectName("maximizeButton");
    m_closeButton->setObjectName("closeButton");

    m_minimizeButton->setIcon(QIcon(":/icon/minWhite.png"));
    m_minimizeButton->setToolTip(tr("最小化"));
    m_minimizeButton->installEventFilter(this);

    m_maximizeButton->setIcon(QIcon(":/icon/restoreWhite.png"));
    m_maximizeButton->setToolTip(tr("向下还原"));
    m_maximizeButton->installEventFilter(this);

    m_closeButton->setIcon(QIcon(":/icon/closeWhite.png"));
    m_closeButton->setToolTip(tr("关闭"));
    m_closeButton->installEventFilter(this);

    //按键背景透明，图标颜色为m_fontColor
    m_titleLabel->setStyleSheet(QString("color:white;"));
    m_minimizeButton->setStyleSheet(QString("background-color:rgba(0,0,0,0);"));
    m_maximizeButton->setStyleSheet(QString("background-color:rgba(0,0,0,0);"));
    m_closeButton->setStyleSheet(QString("background-color:rgba(0,0,0,0);"));

    //控件布局
    QHBoxLayout *pLayout = new QHBoxLayout(this);
    pLayout->addWidget(m_iconLabel);
    pLayout->addSpacing(5);
    pLayout->addWidget(m_titleLabel);
    pLayout->addWidget(m_minimizeButton);
    pLayout->addWidget(m_maximizeButton);
    pLayout->addWidget(m_closeButton);
    pLayout->setSpacing(0);
    setLayout(pLayout);

    //信号槽绑定
    connect(m_minimizeButton, SIGNAL(clicked(bool)), this, SLOT(onClicked()));
    connect(m_maximizeButton, SIGNAL(clicked(bool)), this, SLOT(onClicked()));
    connect(m_closeButton, SIGNAL(clicked(bool)), this, SLOT(onClicked()));
}

/**
* @brief MainWindow::mousePressEvent 鼠标双击：界面最大化或还原
* @param event 鼠标事件
*/
void MyTitleBar::mouseDoubleClickEvent(QMouseEvent *event)
{
    Q_UNUSED(event);

    emit m_maximizeButton->clicked();
}

/**
* @brief MainWindow::mousePressEvent 鼠标按下：准备移动
* @param event 鼠标事件
*/
void MyTitleBar::mousePressEvent(QMouseEvent *event)
{
    m_mousePosition = event->pos(); //鼠标在控件中的位置

    m_isMousePressed = true;
}

/**
* @brief MainWindow::mousePressEvent 鼠标移动
* @param event 鼠标事件
*/
void MyTitleBar::mouseMoveEvent(QMouseEvent *event)
{
    if(m_isMousePressed == true )
    {
        QWidget *pWindow = this->window();

        if(pWindow->isMaximized()) //界面最大时，先还原再移动
        {
            pWindow->showNormal();

            //防止鼠标指针在界面之外
            m_mousePosition = QPoint(200, 10);
            pWindow->move(event->globalPos().x() - 200, event->globalPos().y());
        }
        else
        {
            QPoint movePot = event->globalPos() - m_mousePosition;
            pWindow->move(movePot);
        }
    }
}

/**
* @brief MainWindow::mousePressEvent 鼠标抬起：移动结束
* @param event 鼠标事件
*/
void MyTitleBar::mouseReleaseEvent(QMouseEvent *event)
{
    Q_UNUSED(event);

    m_isMousePressed = false;
}

/**
* @brief MyTitleBar::eventFilter 事件过滤器
* @param obj 过滤对象
* @param event 事件
* @return
*/
bool MyTitleBar::eventFilter(QObject *obj, QEvent *event)
{
    switch(event->type())
    {
        case QEvent::WindowTitleChange: //更改标题显示内容
        {
            QWidget *pWidget = qobject_cast<QWidget *>(obj);
            if(pWidget)
            {
                m_titleLabel->setText(pWidget->windowTitle());
            }
        }
        break;
        case QEvent::WindowIconChange: //更改图标
        {
            QWidget *pWidget = qobject_cast<QWidget *>(obj);
            if(pWidget)
            {
                QIcon icon = pWidget->windowIcon();
                m_iconLabel->setPixmap(icon.pixmap(m_iconLabel->size()));
            }
        }
        break;
        case QEvent::WindowStateChange:
        case QEvent::Resize:
            updateMaximize(); //最大化/还原
        break;
        case QEvent::Enter: //鼠标悬停在控件上，控件变色
        {
            if(obj == m_minimizeButton)
            {
                m_minimizeButton->setIcon(QIcon(":/icon/minRed.png"));
            }
            else if(obj == m_closeButton)
            {
                m_closeButton->setIcon(QIcon(":/icon/closeRed.png"));
            }
            else if(obj == m_maximizeButton)
            {
                if(m_maximizeButton->property("maximizeProperty") == "向下还原")
                {
                    m_maximizeButton->setIcon(QIcon(":/icon/restoreRed.png"));
                }
                else
                {
                    m_maximizeButton->setIcon(QIcon(":/icon/maxRed.png"));
                }
            }
        }
        break;
        case QEvent::Leave: //鼠标离开控件，颜色恢复
        {
            if(obj == m_minimizeButton)
            {
                m_minimizeButton->setIcon(QIcon(":/icon/minWhite.png"));
            }
            else if(obj == m_closeButton)
            {
                m_closeButton->setIcon(QIcon(":/icon/closeWhite.png"));
            }
            else if(obj == m_maximizeButton)
            {
                if(m_maximizeButton->property("maximizeProperty") == "向下还原")
                {
                    m_maximizeButton->setIcon(QIcon(":/icon/restoreWhite.png"));
                }
                else
                {
                    m_maximizeButton->setIcon(QIcon(":/icon/maxWhite.png"));
                }
            }
        }
        break;
        default:
        break;
    }

    return QWidget::eventFilter(obj, event);
}

/**
* @brief MyTitleBar::onClicked 进行最小化、最大化/还原、关闭操作
*/
void MyTitleBar::onClicked()
{
    QPushButton *pButton = qobject_cast<QPushButton *>(sender());
    QWidget *pWindow = this->window();
    if(pWindow->isTopLevel())
    {
        if(pButton == m_minimizeButton) //最小化
        {
            pWindow->showMinimized();
        }
        else if (pButton == m_maximizeButton) //最大化、还原
        {
            pWindow->isMaximized() ? pWindow->showNormal() : pWindow->showMaximized();
        }
        else if (pButton == m_closeButton) //关闭
        {
            pWindow->close();
        }
    }
}

/**
* @brief MyTitleBar::updateMaximize 最大化/还原时，更改图标样式
*/
void MyTitleBar::updateMaximize()
{
    QWidget *pWindow = this->window();
    if(pWindow->isTopLevel())
    {
        if(pWindow->isMaximized())
        {
            m_maximizeButton->setToolTip(tr("向下还原"));
            m_maximizeButton->setProperty("maximizeProperty", "向下还原");
            m_maximizeButton->setIcon(QIcon(":/icon/restoreWhite.png"));
        }
        else
        {
            m_maximizeButton->setProperty("maximizeProperty", "最大化");
            m_maximizeButton->setToolTip(tr("最大化"));
            m_maximizeButton->setIcon(QIcon(":/icon/maxWhite.png"));
        }

    m_maximizeButton->setStyle(QApplication::style());
    }
}

更改widget.h中的代码

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include "mytitlebar.h"

namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget *parent = nullptr);
    ~Widget();

protected:
    void resizeEvent(QResizeEvent *event);

private:
    Ui::Widget *ui;
    MyTitleBar* m_titleBar; //自定义标题栏
};

#endif // WIDGET_H

更改widget.cpp中的代码

#include "widget.h"
#include "ui_widget.h"
#include <QLayout>

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

    //第一个是去掉原边框及标题栏，第二个是保留最小化及还原功能，主要是为了还原，最小化下面实现了
    this->setWindowFlags(Qt::FramelessWindowHint | Qt::WindowMinimizeButtonHint);

    QVBoxLayout *layout = new QVBoxLayout;

    //自定义标题栏
    m_titleBar = new MyTitleBar;
    m_titleBar->resize(this->width(), 30);
    installEventFilter(m_titleBar);
    setWindowTitle("自定义标题栏"); //设置标题内容
    setWindowIcon(QIcon(":/icon/capricorn.png")); //设置图标

    QWidget *centerWidget = new QWidget; //中间窗口

    layout->addWidget(m_titleBar);
    layout->addWidget(centerWidget);
    layout->setContentsMargins(5, 0, 5, 2); //设置左侧、右侧边距为5
    this->setLayout(layout);

    this->showMaximized(); //最大化显示

    QString backgroundColor = "black"; //背景色
    QString fontColor = "white"; //字体色

    //渐变背景
    this->setStyleSheet(QString("QWidget#Widget{background-color:qlineargradient(x1:0,     y1:0, x2:1, y2:1, stop:0 %1, stop:1 %2);}")
.arg(backgroundColor).arg(fontColor));
}

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


/**
* @brief MainWindow::resizeEvent 当界面大小改变时更改标题栏大小
* @param event
*/
void Widget::resizeEvent(QResizeEvent *event)
{
    Q_UNUSED(event);

    m_titleBar->resize(this->width(), 30); //更改标题栏大小
}

五、运行测试

可以进行放大缩小移动等

怎么追摩羯座
关注
  • 10
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Qt:自定义标题栏(QMainWindow)
cfqcfqcfqcfqcfq的博客
05-22 1万+
简述        通过qss自定义外观后，发现标题栏的外观未发生变化，与整体的风格不融洽。因为程序的最外层边框加载的是系统本地的窗口。为了使风格统一，我们可以自定义一个标题栏来显示窗体的图标、标题，以及控制窗体最小化、最大化、关闭的按钮，并控制其风格与主界面一致。        网上有很多Qt自定义标题栏的代码。这里分享一个我觉得较好的自定义标题栏。与其他代码不同，其把对主窗口的相关
qt自定义标题栏
qq_41639957的博客
04-05 338
1）创建一个标题的界面类，重新实现鼠标移动点击等事件 2）设置主界面无边框，创建一个垂直布局管理器，插入标题界面，在标题界面和主界面之间添加一个分割器 setWindowFlags(Qt::FramelessWindowHint | Qt::WindowStaysOnTopHint); QtGuiDetailTitle *title = new QtGuiDetailTitle(this); ui...
QT快速开发自定义标题栏示例
10-08
QT快速开发自定义标题栏示例，非常简单，使用方法如下： 1、目标窗口添加标题栏、最大化最小化关闭按钮（该步最好每次使用时，从模板程序中直接复制） 2、窗口基类从QDialog改为QFramelessDialog 3、窗口构造函数中，调用无边框窗体初始化函数，头文件中已经写好几个宏函数直接调用即可，使用宏的情况下，必须保证标题栏、按钮对象名称一致，注意调用初始化函数一定要在ui.setupUi(this);后面。
Qt 实现 自定义窗口标题栏
12-07
以上代码用Qt实现了自定义窗口标题栏，非常实用，提供了窗口图标、窗口标题、最小化、最大化、关闭按钮等几个部分。可以应用到每一个窗口中去，保持每个窗口外观的一致性，同时自定义的标题栏也比系统自带的漂亮很多。
Qt自定义标题栏用法
u011718663的博客
09-27 527
本博客主要总结创建Qt工程时，不用系统自带的标题栏，而是用自定义的标题栏。其中，自定义标题栏主要原理是，屏蔽原来的标题栏，然后用QVBoxLayout垂直布局管理器，加载一个标题栏QWidget。其中，这个标题栏QWidget里面自定义标题栏的功能按钮，比如图标、图标内容、最大化按钮（QWidget::showMaximized()）、最小化按钮（QWidget::showMinimized()）...
Qt高级——Qt自定义标题栏
晴树的专栏
11-20 3141
一、Qt自定义标题栏简介 QWidget及其子类窗体组件的标题栏受操作系统的控制，即标题栏的界面风格与操作系统的主题风格相同，工程实践中需要开发者自行定义，达到美化应用程序界面的目的。 二、Qt自定义标题栏实现 1、自定义标题栏的功能 自定义标题栏需要完成功能如下： （1）自定义标题栏需要包含最小化按钮、最大化按钮、关闭按钮、标题标签、图标标签等图形元素。 （2）标题栏的拖拽。 （3）鼠标双击标题栏实现窗体的最大化、最小化。 2、自定义标题栏的界面布局 自定义标题栏的界面布局如下： 3、标题栏
QT自定义标题栏
一条小闲鱼的博客
07-30 776
效果 1、自定义标题栏 2、QT自带标题栏 自定义标题栏类的代码 1、ui界面 2、.h #include <QWidget> #include <QEvent> #include <QDockWidget> #include <QMouseEvent> namespace Ui { class mTitleBar; } class mTitleBar : public QWidget { //Q_OBJECT public: exp
Qt 自定义标题栏
01-23
QWidget及其子类窗体组件的标题栏受操作系统的控制，即标题栏的界面风格与操作系统的主题风格相同，工程实践中需要开发者自行定义，达到美化应用程序界面的目的。开发环境是Qt5.7，调试成功，可自行下载，如有问题请留言，谢谢！
Qt实现自定义标题头
weixin_39308337的博客
12-19 537
描述 在很多时候都需要自定义标题头的样式。在Qt里面。如果去掉了系统自带的标题头。那么很多属性也就会消失。例如没法拖拽窗体。没法通过鼠标拉伸窗体。 大致实现思路 添加一个水平布局。里面分别有两个QLabel以及三个QPushButton。两个QLabel用来显示图标和窗体标题。三个QPushButton分别对应着隐藏。最大化以及关闭按钮。 然后鼠标在靠近窗体的边缘的时候需要更改鼠标光标的形状。且可以拉伸窗体。同时鼠标按在标题上可以进行拖拽。此标题头内部维护了QWidget* _ownerWidget.其实就
Qt 之 自定义窗口标题栏
12-07
以上代码用Qt实现了自定义窗口标题栏，非常实用，提供了窗口图标、窗口标题、最小化、最大化、关闭按钮等几个部分。可以应用到每一个窗口中去，保持每个窗口外观的一致性，同时自定义的标题栏也比系统自带的漂亮很多。
QT自定义窗口 自由拖动 自定义标题
06-19
QT自定义窗口 自由拖动 自定义标题
Qt自定义标题栏源码V1.0
04-08
自定义标题栏源码，实现了 1.鼠标左键点击移动 2.最小化 最大化/恢复 关闭程序功能 3.双击鼠标最大化/恢复功能 ************************************************************************************************...
qt自定义标题栏 已封装
08-10
初学者项目需要，自己封装的一个qt自定义标题栏，可以直接调用。环境是vs2013+qt5.6.2，其他环境我也不知道能否使用，谨慎下载。 大部分标题栏的显示效果都放在paintEvent函数中，可以动态更改。大部分效果都写了...
Qt5实现自定义标题栏
最新发布
05-08
Qt自定义标题栏
myWidget_qt自定义标题栏_qt自定义标题_mywidget_
09-30
qt自定义标题栏，可任意改变标题栏的各种颜色大小字体位置等样式
Qt自定义标题栏,带UI的
gdizcm的专栏
12-06 1325
带UI的QT自定义标题栏
QT自定义标题栏（最大化、最小化和无边框拉伸等--可直接使用）和样式设计（美化）
weixin_51071912的博客
01-09 1750
提供可直接使用的自定义窗口，内有自定义标题栏，实现了最大化、最小化、关闭、无边框拉伸等功能，直接继承窗口使用
Qt自定义标题栏（可拖动标题栏编辑修改窗口大小）
weixin_46246664的博客
06-06 6035
记录下Qt的自定义标题栏
qt 自定义标题栏
05-25
在 Qt 中，可以通过自定义 QWidget 的 paintEvent() 函数来实现自定义标题栏。具体步骤如下： 1.创建一个新的 QWidget，用于作为自定义标题栏。 2.将 QWidget 的窗口标志设置为 Qt::WindowFlags(Qt::FramelessWindowHint)，这样可以去掉默认的标题栏。 3.重写 QWidget 的 paintEvent() 函数，在该函数中绘制自定义标题栏。 4.将 QWidget 设置为 QMainWindow 的标题栏，即调用 QMainWindow 的 setWindowTitle() 函数，并将其参数设置为自定义标题栏的指针。 下面是一个简单的示例代码： ``` #include <QtWidgets> // 继承 QWidget，作为自定义标题栏 class CustomTitleBar : public QWidget { public: CustomTitleBar(QWidget *parent = nullptr) : QWidget(parent) { // 设置窗口标志 setWindowFlags(Qt::FramelessWindowHint); } protected: void paintEvent(QPaintEvent *) override { QPainter painter(this); painter.fillRect(rect(), Qt::blue); painter.drawText(rect(), Qt::AlignCenter, "Custom Title Bar"); } }; int main(int argc, char *argv[]) { QApplication app(argc, argv); QMainWindow mainWindow; // 设置主窗口标题 mainWindow.setWindowTitle("Main Window"); // 创建自定义标题栏 CustomTitleBar *titleBar = new CustomTitleBar(&mainWindow); // 设置自定义标题栏为主窗口的标题栏 mainWindow.setMenuWidget(titleBar); mainWindow.show(); return app.exec(); } ``` 运行该程序，可以看到自定义的蓝色标题栏。你可以根据自己的需要修改 paintEvent() 函数，来实现各种不同样式的标题栏。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值