Qt5.9 UI设计(六)——TitleBar功能实现
前言
上一章介绍了ControlTreeWidget
与ControlTabWidget
联动的功能,这一章我们将实现自定义 TitleBar
的功能
操作步骤
-
修改按键图标最大和最小值
-
右键按键图标,转到对应的槽函数中去
-
对应的槽函数的实现如下:
void MainTitleBar::on_pushButtonMin_clicked()
{
if(parentWidget)
{
parentWidget->showMinimized();
}
}
void MainTitleBar::on_pushButtonMax_clicked()
{
if(parentWidget == nullptr) return;
if (parentWidget->isMaximized())
{
parentWidget->showNormal();
ui->pushButtonMax->setStyleSheet("QPushButton{border-image: url(:/image/normal_normal.png);}"
"QPushButton:hover{border-image: url(:/image/normal_hover.png);}");
}
else
{
parentWidget->showMaximized();
ui->pushButtonMax->setStyleSheet("QPushButton{border-image: url(:/image/max_normal.png);}"
"QPushButton:hover{border-image: url(:/image/max_hover.png);}");
}
}
void MainTitleBar::on_pushButtonClose_clicked()
{
if(parentWidget)
{
parentWidget->close();
}
}
- 此时运行的效果图如下,这个时候可以看到最上边还有一个窗口 MainWindow 的工具栏,同时还有一小条标题栏。
- 点击pushButtonClose 按钮就剩下只有MainWindow 的窗口了。
- 我们在UI中将 menuBar 和mainToolBar 都删除
同时在代码中设置
this->setWindowFlags(Qt::FramelessWindowHint);
- 此时就已达到我们想要的效果:只显示我们自定义的内容
- 在MainTitleBar 初始化的时候,我们加上按键的样式设计,最终显示效果如下:
void MainTitleBar::InitValue()
{
ui->pushButtonMax->setStyleSheet("QPushButton{border-image: url(:/image/normal_normal.png);}"
"QPushButton:hover{border-image: url(:/image/normal_hover.png);}");
ui->pushButtonMin->setStyleSheet("QPushButton{border-image: url(:/image/min_normal.png);}"
"QPushButton:hover{border-image: url(:/image/min_hover.png);}");
ui->pushButtonClose->setStyleSheet("QPushButton{border-image: url(:/image/close_normal.png);}"
"QPushButton:hover{border-image: url(:/image/close_hover.png);}");
}
这里有一点小BUG,就是最小化设计的时候,图标实现有些异常,不知道具体是哪里引起的。
总结
这一章实现了自定义TileBar
的功能,下面一章,我们将介绍UI的样式设计.
本章工程代码:page_sample_04.rar
完整工程下载地址,请到 liwen01
微信公众号中回复: QT
获取

分类:
QT
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具