【思想落地】一文分享Qt界面的设计与开发_qt界面设计经典案例

一、开篇

Qt作为一个功能强大的软件开发工具，开发软件对于开发人员来说非常友好，本文小生分享一个具体的界面开发过程和思路。

本文不会涉及具体的代码实现，而是重点描述软件界面的实现和实现思路。先来看看实现的界面的样子吧：

上图是一个医疗手术大屏系统的中央控制操作界面。总体来说，该界面主要有两大类功能：传感器参数显示和人机交互控制。

1. 传感器参数显示：放于界面的中央部分。

2. 时间参数显示：位于界面的顶部。

3. 人机交互控制：位于左侧、右侧、底部。

左侧

右侧

底部

二、软件界面功能分析

（1）顶部区域用于显示时间，包括：手术计时、麻醉计时、系统的本地时间三部分时间信息参数。

（2）中央传感器参数显示：软件的这部分界面需要以图表方式显示各类传感器的参数，例如：洁净度、前压差、后压差、二氧化碳等参数。

（3）左侧控制区：设置【手术信息】、【环境】、【空调】、【音乐】四个控制按钮，作为软件界面的逻辑切换的控件。

（4）右侧控制区：设置【护理管理】、【电话】、【系统】、【日历】四个控制按钮，功能与左侧控制区的按钮类似。

（5）底部控制区：这部分设置音乐控制功能（上一曲、播放/暂停、下一曲、播放音量控制），中间为手术灯的控制按钮（手术灯的开/关），拨打电话（护士站），系统控制区（禁音、设置、退出系统）。

三、界面实现

本小节站在Qt的角度，对该界面进行技术分析和实现。描述具体的实现思路和过程（不会涉及具体代码）

（3-1）从界面整体角度规划功能和切片

隐藏界面中具体的显示和人机交互控件，单独切一张背景图片出来，如下图所示：

（注）这里为什么不留下底部的控制区域的边框划分呢，主要考虑到这部分会使用单独的QWidget来实现，同时也为了后期界面背景的调整和修改，减少调整控件位置的工作。

好啦，背景准备好了，现在来看看顶部的时间参数。

（3-2）顶部时间参数的处理

从界面中可见，这部分时间参数的数字带有渐变和光晕效果，如果使用Qt的QLabel来实现，基本上达不到这样的效果（简单颜色的界面可以）。处理这部分，需要将0-9的数字单独做成效果图，并将其组合成时间显示的格式。软件根据系统的时间参数，将普通的参数设置成0-9的效果图片即可。

时间上面的文字使用QLabel实现即可。

（3-3）左侧/右侧按钮控制区

从界面中可见，这部分按钮是不规则按钮，最为明显的是【环境】这个按钮：

故此处需要实现不规则按钮（使用setMask()实现）。
（注）处理按钮的时候，考虑到多语言的切换。可以把按钮背景图片的文字取消，使用按钮原生的文字，这样在做翻译的时候比较方便。否则，就需要将多语言作为图片来显示。

（3-4）中央传感器显示

这部分先切出背景，如下图所示：

1、使用QLabel表示“环境”标题

2、在这个界面中，当用户在点击按钮的时候会切换对应的图表。这个功能可使用QPushButton+QStackedWidget实现，也可以单独使用QTabWidget实现，还可以使用QPushButton+QTabWidget实现。

此处，最难处理可能是这种图表效果了。可以使用QtCharts或者QCustomPlot库来实现，但可能需要开发大量代码。因为每一个柱形带有渐变效果且两端是圆弧的。当然，也可以使用QPainter自定义控件去绘制，但是工作量应该很大（不推荐）。使用图表库是可以实现这种效果的。

（3-5）底部控制区

这部分比较好处理，使用自定义图形按钮就可以实现了

四、总结

开发这样一个界面，需要使用QWieget来做界面划分，然后实现各自对应下的功能和效果，开放API接口供其他类访问。然后把这些QWidget组合起来，就实现这个界面的开发啦。

本文基于Qt C++做了一个具体界面的实现思路分享。使用C++熟练了，完成这样一个界面，在界面组成元素已经设计完成的前提下，大概需要3-5个工作日完成，当然这是比较快的啦（哈哈）：包括人机交互控制区按钮的槽函数的设计、图表的设计、图表数据接口的预定义，时间参数的获取和自定义时间图片效果的显示、还有些具体的细节。总体而言，Qt开发界面还是比较快且开发友好，非常Nice！

QtQuick亦能实现，殊途同归，萝卜青菜各有所爱。

---

搜索关注【嵌入式小生】微信公众号，可获取很多精彩内容>>>