当前位置:   article > 正文

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

qt界面设计经典案例

一、开篇

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

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

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

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

  1. 时间参数显示:位于界面的顶部。

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

左侧

右侧

底部

二、软件界面功能分析

(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亦能实现,殊途同归,萝卜青菜各有所爱。


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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/很楠不爱3/article/detail/601020
推荐阅读
相关标签
  

闽ICP备14008679号