• 前言
• (一)主页面实现
• (二)widgetTree widgetTab 功能实现
• (三)widgetTree 与 widgetTab 相互关联
• (三)标题栏功能实现
• (四)统一外观样式
• (五)整体功能演示
• (六)详细文章目录
• 说明

前言

桌面应用，个人认为比较友好的是使用QT来开发，并且它还可以跨平台开发。因为工作需要，经常需要使用一些小工具，因为使用频率低，所以就无所谓UI的设计，功能可以正常使用就已经很不错了。

如果要开发一个工具给别人使用，并且要方便日后功能需求的扩展，这时UI的设计就显得很重要了。

对UI的一个基本要求就是可以正常放大缩小，并且可以拉伸，相应的控件位置并不发生大的改变。

下面介绍了一个导航栏实现多个页面切换功能的UI demo，从软件安装，到整个功能的实现，分开在7篇文章中实现。最终效果如下：

视频加载中...

(一)主页面实现

主页面由三个部分组成：widgetTab widgetTree widgetTitle

1. widgetTree 用来实现页面导航的功能，实现切换不同页面的功能
2. widgetTab 用来实现具体页面的功能
3. widgetTitle 用来实现自定义标题栏的功能

(二)widgetTree widgetTab 功能实现

1. 首先分别实现 widgetTree 导航栏的功能，以及 widgetTab 对应子页面的功能

(三)widgetTree 与 widgetTab 相互关联

1. 将 widgetTree 与 widgetTab 建立关联

(三)WidgetTitle标题栏功能实现

1. 首先将系统的标题栏给删了，然后我们自定义实现应用的最大，最小及关闭三个按钮的功能

(四)统一外观样式

1. 使用qsss实现应用的整体统一样式

(五)详细文章目录

Qt5.9 UI设计(一)——在win10系统上安装Qt5.9

Qt5.9 UI设计(二)——最简Qt工程搭建

Qt5.9 UI设计(三)——添加UI、类及资源文件

Qt5.9 UI设计(四)——布局设计及自定义界面

Qt5.9 UI设计(五)——将Tabwidget与treeWidget相互关联

Qt5.9 UI设计(六)——TitleBar功能实现

Qt5.9 UI设计(七)——统一样式设计

说明

本系列UI介绍的文章，参考的是GitHub上一个QCoolPage的项目，它的地址为：https://github.com/YYC572652645/QCoolPage

作为学习交流使用，将QCoolPage的实现拆解出来，以便入门学者可以比较快速地入手。如有侵权，欢迎联系沟通处理。

完整工程下载地址，请到 liwen01 微信公众号中回复: QT 获取

--------------End--------------

如需获取更多内容

请关注公众号 liwen01