气象自动监测站QT程序设计(一):图形化搭建程序界面

博主做了一个FPGA采集控制的小型气象自动站,需要开发一个与此配套的上位机程序,因此花了一段时间。楼主使用的开发平台是QT5.8,编译器用的是MSVC2015(截至写稿时目前QT还没有颁布支持VS2017的版本)。上位机可以选择的开发平台众多,QT界面易用美观、设计简单、支持C++和QML两种方式开发、跨平台特性好,博主更看好它的使用价值。

本文从开发一个上位机的开始说起,及设计程序界面。本文开发的上位机界面主要有两个,用户登录界面如下图所示。

图片名称

该界面放置了一个Label控件显示当前的系统时间,两个单行文本框用于输入用户名和密码,一个button控件用来登录。

气象监测界面如下图所示。

图片名称

最上方是一行菜单栏,主体是一个可切换的tab控件,每个子界面对应一种气象要素,里面放一个坐标轴用于绘制曲线。

使用QT进行软件界面设计非常简单,谁都可以轻松上手。本文重点不在于介绍如何进行基础的界面设计,而是介绍几个细节。

1. 布局的基本元素不是控件,而是“Layout”和“Spacer”

初学者容易掉入一个误区,那就是认为现在的程序都是由一个个控件组合而成的,一上手QT也会发现它提供了Buttons、Container、Input Widget、Display Widget等很多控件。然而事实上一个良好的界面设计应该由Layout和Spacer来搭建骨骼,然后才是往Layout中添加血肉。

举个例子,我们来看下上面的登录界面在设计时是什么样子的,

图片名称

界面由三个Layout和三个Vertical Spacer划分。最上面是一个Horizontal Layout,内部的元素是水平放置关系,这里用一个Horizontal Spacer将一个控件顶到最左边。第二个Layout放置了一个Logo。第三个Layout是Verical Layout,内部的元素是垂直放置关系,在这个Layout里面还用了更多的Spacer和Layout划分。

使用Layout和Spacer的好处就是定义了一个界面的框架,也就是它的骨骼。就像人在蹲下的时候骨骼会缩在一起,站起来的时候骨骼会张开,然而人保持了“人形”没有变形。定义框架的好处就是在于放大和缩小软件的外框时内部的结构会随着框架的变化而调整,从而不会出现界面变乱的情况。

2.学会使用空灵活设置Spacer的大小

假设我们要设计一个介绍软件作者的界面,根据上一节的思想,我们放置一个Vertical Layout,用四个Vertical Spacer将三个Label标签分割开,界面如下图所示。

图片名称

这时就会发现问题,三个Label之间的距离可能太大了,而我们确好像调整不了,因为Vertical Spacer在分割空间时会自动的均匀划分。其实这是因为放置的Spacer有一个属性sizeType默认都是Expading,只要在属性里将这个值“Fixd”,就可以指定Spacer的高度和宽度,这样界面设计就更加灵活。

图片名称

3. 掌握样式表和样式表使用时的优先级

样式表是使界面设计更加美观的重要工具,而在设计界面时不要忽视对样式表优先级的使用。假设一个界面由如下元素构成。

图片名称

aboutauthor是最顶层的对话框,如果更改这个对象的样式表,那么样式表设置将应用于下属于aboutauthor的所有控件,比如指定label宽度为20px,那么在这个窗口中建立的所有label宽度都会变成20px。

那么明明就需要一个label,比如label_3,它的宽度应该是40px,那该怎么办呢?其实只要重新指定label_3的样式表就好了,更底层的样式表将会顶替掉顶层对话框指定的样式表。事实上实用的做法都是先在顶层对话框指定所有的样式表,这个样式表决定了软件界面的设计风格。在具体设计时遇到特殊情况只要用优先级关系重新设定样式表即可。

4. 善于使用第三方控件

QT作为一个半开源软件的好处就是,除了官方提供的较为常规的控件之外,网上还可以找到大量第三方设计人员开发的控件,使用最多的网站有www.linux-apps.com和github.com。比如下面这个控件QVUMeter可以调整音量。

图片名称

QNeedleIndicator控件给出了一些常用的仪表。

图片名称

要多多挖掘网上其他人的优秀设计,灵活到自己的软件开发中简单方便,还能大大加快开发速度。

猜你喜欢

转载自blog.csdn.net/fpgadesigner/article/details/74278934
今日推荐