【思想落地】一文分享Qt界面的设计与开发
文章目录
- 一、开篇
- 二、软件界面功能分析
- 三、界面实现
- (3-1)从界面整体角度规划功能和切片
- (3-2)顶部时间参数的处理
- (3-3)左侧/右侧按钮控制区
- (3-4)中央传感器显示
- (3-5)底部控制区
- 四、总结
一、开篇
Qt作为一个功能强大的软件开发工具,开发软件对于开发人员来说非常友好,本文小生分享一个具体的界面开发过程和思路。
本文不会涉及具体的代码实现,而是重点描述软件界面的实现和实现思路。先来看看实现的界面的样子吧:
上图是一个医疗手术大屏系统的中央控制操作界面。总体来说,该界面主要有两大类功能:传感器参数显示
和人机交互控制
。
- 传感器参数显示:放于界面的中央部分。
- 时间参数显示:位于界面的顶部。
- 人机交互控制:位于左侧、右侧、底部。
左侧
右侧
底部
二、软件界面功能分析
(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亦能实现,殊途同归,萝卜青菜各有所爱。
搜索关注【嵌入式小生】微信公众号,可获取很多精彩内容>>>
【思想落地】一文分享Qt界面的设计与开发相关推荐
- QT界面GUI设计之选择文件并显示
QT界面GUI设计之打开图片并显示 准备做一个Qt的界面,只是实现了基本功能,但是各种相关细节还没有做到位,今天凑了半天论文,毫无进展,下午把QT界面又拿出来研究了一下,主要是打开文件选择图片后显示. ...
- QT界面GUI设计之Lable图片及文字显示
QT界面GUI设计之Lable图片及文字显示 今天主要写一下Qt界面设计的Label相关用法,因为没有系统的学习,所以今天发现以前错了好多,今天记录一下,Label的相关用法. 首先是搭建一个Labe ...
- linux下qt制作日历,基于QT的多功能日历设计与开发.doc
基于QT的多功能日历设计与开发 上海电力学院 本科毕业设计(论文) 题 目: 基于QT的多功能日历 设计与开发 院 系: 计算机与信息工程学院 专业年级: 2007电子科学与技术 学生姓名: 张岚 学 ...
- QT5 界面截图保存到本地+输出PDF/WORD格式文档+QT界面中文乱码及输出PDF中文乱码的解决(亲身实践并且成功)
最近做了一个和QT5有关的项目,遇到很多问题也学习到不少,特意写下来希望帮到更多的人.(我的版本VS2017+QT5.12.0) 一.QT5截图并保存到本地 在头文件添加必须项 #include &l ...
- Qt界面之侧边栏隐藏和滑出
一.前言 在实际的Qt界面布局设计中,特别是主界面中,经常会用到侧边栏的方式,然后在其中加入其他控件来复合使用,下面简单来实现一下Qt侧边栏的隐藏和显示,效果如下: 二.功能介绍 界面控件很简 ...
- 基于嵌入式QT界面GPS定位系统设计与实现
目 录 第1章 绪论- -1 1.1 选题背景和意义- - .1 1.2 主要研究内容- - -1 第2章 GPS系统基础知识介绍- - - -2 2.1 GPS 定位的坐标系统- - - -2 2. ...
- 视频教程-游戏UI界面框架设计系列视频课程-Unity3D
游戏UI界面框架设计系列视频课程 二十多年的软件开发与教学经验IT技术布道者,资深软件工程师.具备深厚编程语言经验,在国内上市企业做项目经理.研发经理,熟悉企业大型软件运作管理过程.软件架构设计理论. ...
- 一文读懂qt界面设计(分裂器,布局,拉伸,各种属性设置)
可以先看看我这个文章:qt关于界面设计中的一些知识总结_我是标同学的博客-CSDN博客_qt 水平伸展 现在我们来正式开始讲解. 布局种类 qt中能称为布局管理器的有如下6个: 水平布局(QHBoxL ...
- QT界面中实现视频帧显示的多种方法及应用
QT界面中实现视频帧显示的多种方法及应用 (一) 引言 1.1 视频帧在QT界面中的应用场景 1.2 不同方法的性能和适用性分析 1.2.1 使用QLabel和QPixmap 1.2.2 使用QPai ...
- qt界面 mp4_MP6 –这会成为WordPress管理员用户界面的未来吗?
qt界面 mp4 The User Interface team at WordPress has recently presented a new but secret idea about how ...
最新文章
- cas server 配置
- 算法提高---概率计算
- 探讨PHP获取checkbox值
- symantec、officescan控制台忘记密码如何处理
- 信息属性列表关键字 info.plist
- 后台服务系统之Dubbo协议
- 分布式机构 RPC远程过程调用
- darknet activate_array
- 第 6-7 课:Java 分布式框架面试题合集
- 用matlab求解信号的DFT,利用MATLAB实现信号DFT的计算
- ArcSDE10.1配置Oracle 监听器来使用SQL操作ST_Geometry(个人改动版)
- AOS V0.6 发布,JavaEE 应用基础平台
- 2013年蓝桥杯真题
- C语言编程轰炸,利用C语言编写一个数字炸弹小游戏
- python插件安装包_Python的插件安装
- html制作公众号,自制微信公众号一键排版工具
- 笔记——衡量回归算法的标准最好的评价指标R Square
- 历史上各大帝国面积排行榜
- 使用get传参的时候,参数在后头获取不到或者出现别的错误。
- 调用企查查第三方Api:企业工商模糊搜索