【思想落地】一文分享Qt界面的设计与开发

文章目录

• • • 一、开篇
    • 二、软件界面功能分析
    • 三、界面实现
    • • （3-1）从界面整体角度规划功能和切片
      • （3-2）顶部时间参数的处理
      • （3-3）左侧/右侧按钮控制区
      • （3-4）中央传感器显示
      • （3-5）底部控制区
    • 四、总结

一、开篇

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

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

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

右侧

二、软件界面功能分析

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

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

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

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

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

三、界面实现

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

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

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

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

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

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

来源：iriczhao