Qt实战案例（42）——利用Qt实现自定义标题栏功能（自定义最大化、最小化、关闭等功能）

wendy_ya

已于 2022-04-16 16:08:13 修改

阅读量9.6k

点赞数 25

分类专栏： Qt 文章标签： qt c++ ui

于 2022-04-15 17:31:28 首次发布

本文链接：https://blog.csdn.net/didi_ya/article/details/124195800

版权

Qt 专栏收录该内容

86 篇文章 564 订阅

订阅专栏

一、项目介绍（为什么要自自定义标题栏功能）

无论是使用qtdesigner，还是直接在程序中创建一个Qwidget，qt程序生成的界面都会生成一个默认的标题栏。
该标题栏实质上应当是一个边框，只不过这个边框上可以显示ico，标题，可以进行最大化最小化等操作。
标题栏的颜色随计算机系统的主题变化，且形式固定，如果为界面设置统一的背景和风格，这个标题栏就会非常的突兀，丑陋。因此，如果想要获得一个和谐的统一的UI界面，我们最好把系统生成的默认标题栏去掉，自己重现默认标题栏附带的功能。

默认标题栏，在统一背景下显得很突兀
自定义标题栏，可以自己设计按键的大小，图标，位置，能够和背景更加统一

二、项目基本配置

新建一个Qt案例，项目名称为“UITest”，基类选择“QWidget”，点击选中创建UI界面复选框，完成项目创建。

三、UI界面设计

UI界面布局如下：
在这里插入图片描述
在UI界面中分别添加三个toolbutton按钮：

序号	名称	类型	属性
①	tbn_close	QToolButton	\
②	tbn_max	QToolButton	\
③	tbn_min	QToolButton	\

四、主程序实现

4.1 隐藏边框

QT编程中使用以下语句可以去除系统自动生成的默认边框。

setWindowFlags(Qt::FramelessWindowHint);//隐藏边框

通过修改setWindowFlags的输入，我们还可以将边框修改成特殊的样式，比如只带一个关闭按钮。
Qt::FramelessWindowHint用于生成无边界窗口。用户无法通过窗口系统移动或调整无边框窗口的大小。

由于标题栏的本质是一个边框，或者说一个group，这个边框作为限制，UI内容嵌套在边框里，而边框则“悬浮”在桌面上，因此去掉标题栏后会存在如下问题：

因此，去除边框后，首当其冲，UI界面会因为失去边框丢失调整大小的能力，表现出来的就是鼠标无法选中界面的边缘，达到拖动边缘改变大小的目的。
因为改变界面在桌面上的位置原本由边框实现，去除边框后，UI与桌面不存在明确的布局关系，界面内容将无法移动。
原本程序的最大化（还原），最小化，关闭等功能由标题栏的按钮实现，去除标题栏后，该类操作界面的方式就会消失，不过我们仍可以通过底部状态栏右键操作界面。

总结而言，去除标题栏后，我们将无法通过按钮对界面进行最大化（还原），最小化，关闭等操作，无法拖动界面，也无法改变界面的大小，而这些也将是我们后续亟待实现的功能。

4.2 设置最大化（还原），最小化，关闭按钮的样式风格

首先，设置按钮样式：

    ui->tbn_close->setIcon(QIcon(":/img/close.png"));
    ui->tbn_max->setIcon(QIcon(":/img/max.png"));
    ui->tbn_min->setIcon(QIcon(":/img/min.png"));

绘制或找到符合自己界面风格的各按钮标志，并提前添加到QT的素材文件（.qrc）里，然后在程序中调用相应图片：

    //设置样式表(默认背景颜色、悬停时背景颜色、按下时背景颜色)
    setStyleSheet("QToolButton{background-color:rgba(0,0,0,0);}QToolButton:hover{background-color:rgba(255,255,255,0.5);}QToolButton:pressed{background-color: rgba(100,100,100,1);}");

4.3 关闭按钮的实现

要实现关闭操作，只需要在关闭按钮clicked槽函数下调用QT默认的close事件即可：

//close
void Widget::on_tbn_close_clicked()
{
    Widget::close();//关闭事件
}

4.4 最大化（还原）按钮的实现

最大化（还原）按钮的实现方式如下：

//max-restore
void Widget::on_tbn_max_clicked()
{
    if (Widget::isMaximized())
    {
        Widget::showNormal();//还原事件
        ui->tbn_max->setIcon(QIcon(":/img/max.png"));
    }
    else
    {
        Widget::showMaximized();//最大化事件
        ui->tbn_max->setIcon(QIcon(":/img/restore.png"));
    }
}

利用isMaximized()函数可以判断UI界面当前的状态，以分别实现最大化和还原的功能。功能切换时注意更换按钮上显示的图标icon，以显示其当前真正的功能。

4.5 最小化按钮的实现

//min
void Widget::on_tbn_min_clicked()
{
   Widget::showMinimized(); //最小化
}

4.6 实现界面移动

因为改变界面在桌面上的位置原本由边框实现，去除边框后，UI与桌面不存在明确的布局关系，界面内容将无法移动。

联想一下，正常情况下界面移动的操作过程是什么？鼠标左键长按标题栏中的非按钮位置，然后拖动鼠标，界面从起始位置移动到鼠标停留的位置。在此过程中，起到定位作用的参数分别有，界面当前的位置，鼠标光标的起始位置，鼠标光标终止位置，起到触发作用则是鼠标左键的长按动作。

用QT编程的思路解析该过程，可以表述为：鼠标左键长按作为信号，该信号触发的槽函数为计算操作过程中鼠标位置的变化，再将界面按鼠标位置的变化移动，达成鼠标拖动界面的效果。

因此，根据上述分析，鼠标拖动界面移动的实现至少需要两个部分：

识别鼠标的长按动作及落点，长按动作用于触发移动操作，落点则用于判断当前位置应不应该移动界面。
根据记录的鼠标位置，计算出鼠标在桌面坐标系中的变化，再将界面按照变化调整位置。

Step1：通过鼠标点击事件，识别鼠标左键按下操作，并记录当前位置：

void Widget::mousePressEvent(QMouseEvent *event)
{
    if(event->button() == Qt::LeftButton)
    {
        whereismouse=event->pos();
    }
}

Step2：通过鼠标移动事件，计算鼠标光标的坐标变化，并借助move事件使界面进行相同的移动：

void Widget::mouseMoveEvent(QMouseEvent *event)
{
    if(event->buttons() == Qt::LeftButton)
    {
        //当窗口最大化或最小化时也不进行触发
        if(Widget::isMaximized() || Widget::isMinimized())
        {
            return;
        }
        else
        {
            //当在按钮之类需要鼠标操作的地方不进行触发(防误触)
            if (ui->tbn_close->underMouse()||ui->tbn_max->underMouse()||ui->tbn_min->underMouse())
            {
            }
            else
            {
                Widget::move(Widget::mapToGlobal(event->pos()-whereismouse));//移动
            }
        }
    }
    event->accept();
}