整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

Qt编写气体安全管理系统2-界面框架

Qt编写气体安全管理系统2-界面框架

、前言

整体框架包括两个部分,一部分是UI界面框架,比如一级二级导航菜单按钮整体布局等,一部分是项目框架,上一篇文章说的是项目框架,这一篇文章来说界面框架,Qt做界面非常快速和高效,尤其是提供了可视化的界面设计,所见即所得,和大部分的开发环境类似,比如宇宙第一的VS,古老的VB,当年超级牛逼的dephi等,都是提供了可视化的所见即所得界面设计器,拖拖控件搞定,然后再去写对应的事件代码,最后编译打包发布。

Qt基本上是超大型一站式GUI超市框架,你要的各种控件都有,比如按钮、标签、文本框、下拉框、进度条等,应有尽有,就算没有的也可以自定义控件来实现,作为一个牛逼的GUI界面框架,要学好还是需要花一丢丢时间的,没有谁是一蹴而就的,做界面核心就两点:布局加配色,一般来说这是美工干的活,但是纵观国内大部分的程序员所在的公司,基本上没有美工,很可怜,需要程序员一个人全包所有的,从需求分析到详细设计到代码编写到界面设计到售后维护等。

Qt的布局提供了横向布局、垂直布局、表格布局、栅格布局,主要就这四种,学会了这几种布局其实还不够的,很多初学者会发现,达不到想要的效果,其实还要配合两个牛逼的东西,那就是控件本身的拉伸策略sizePolicy加上弹簧spacer,其中拉伸策略包括了四个要素,水平策略、垂直策略、水平伸展、垂直伸展。在一个完整的带界面的项目中,肯定需要用上这几个东西才能做出赏心悦目的界面。

Qt的配色当属QSS无敌了,这个东西据说是CSS2的子集,理论上包含了CSS2的所有写法,不过目前CSS3大行其道,QSS还不支持CSS3,估计要重写QSS解析器才行,代码量应该巨大,可能官方目前主推qml,未来估计也没有这个打算更新QSS使其支持CSS3,如果有一天支持CSS3了,那效果绝对宇宙第一了。我开源过3套QSS皮肤样式。

皮肤开源:[https://gitee.com/feiyangqingyun/QWidgetDemo](https://gitee.com/feiyangqingyun/QWidgetDemo) [https://github.com/feiyangqingyun/QWidgetDemo](https://github.com/feiyangqingyun/QWidgetDemo)

文件名称:styledemo

体验地址:[https://gitee.com/feiyangqingyun/QWidgetExe](https://gitee.com/feiyangqingyun/QWidgetExe) [https://github.com/feiyangqingyun/QWidgetExe](https://github.com/feiyangqingyun/QWidgetExe)

文件名称:bin_sams.zip

二、功能特点

1. 采集数据端口,支持串口端口+网络端口,串口支持自由设置串口号+波特率,网络支持自由设置IP地址+通讯端口,每个端口支持采集周期,默认1秒钟一个地址,支持设置通讯超时次数,默认3次,支持最大重连时间,用于重新读取离线的设备。

2. 控制器信息,能够添加控制器名称,选择控制器地址+控制器型号,设置该控制器下面的探测器数量。

3. 探测器信息,能够添加位号,可自由选择探测器型号,气体种类,气体符号,高报值,低报值,缓冲值,清零值,是否启用,报警声音,背景地图,存储周期,数值换算小数点位数,报警延时时间,报警的类型(HH,LL,HL)等。

4. 控制器型号+探测器型号+气体种类+气体符号,均可自由配置。

5. 地图支持导入和删除,所有的探测器对应地图位置可自由拖动保存。

6. 端口信息+控制器信息+探测器信息,支持导入导出+导出到excel+打印。

7. 运行记录+报警记录+用户记录,支持多条件组合查询,比如时间段+控制器+探测器等,所有记录支持导出到excel+打印。

8. 导出到excel的记录支持所有excel+wps等表格文件版本,不依赖excel等软件。

9. 可删除指定时间范围内的数据,支持自动清理早期数据,设置最大保存记录数。

10. 支持报警短信转发,支持多个接收手机号码,可设定发送间隔,比如即时发送或者6个小时发送一次所有的报警信息,短信内容过长,自动拆分多条短信。

11. 支持报警邮件转发,支持多个接收邮箱,可设定发送间隔,比如即时发送或者6个小时发送一次所有的报警信息,支持附件发送。

12. 高报颜色+低报颜色+正常颜色+0值颜色+曲线背景+曲线颜色等,都可以自由选择。

13. 软件的中文标题+英文标题+logo路径+版权所有都可以自由设置。

14. 提供开关设置开机运行+报警声音+自动登录+记住密码等。

15. 报警声音可设置播放次数,界面提供17种皮肤文件选择。

16. 支持云端数据同步,可设置云端数据库的信息,比如数据库名称,用户名+密码等。

17. 支持网络转发和网络接收,网络接收开启后,软件从udp接收数据进行解析。网络转发支持多个目标IP,这样就实现了本地采集的软件,自由将数据转到客户端,随时查看探测器数据。

18. 自动记住用户最后停留的界面+其他信息,重启后自动应用。

19. 报警自动切换到对应的地图,探测器按钮闪烁。

20. 双击探测器图标,可以进行回控。

21. 支持用户权限管理,管理员+操作员两大类,用户登录+用户退出,可以记住密码和自动登录,超过三次报错提示并关闭程序。

22. 支持四种监控模式,设备面板监控+地图监控+表格数据监控+曲线数据监控,可自由切换,四种同步应用。

23. 支持报警继电器联动,一个位号可以跨串口联动多个模块和继电器号,支持多对多。

24. 本地数据存储支持sqlite+mysql,支持远程数据同步到云端数据库。自动重连。

25. 本地设备采集到的数据实时上传到云端,以便手机APP或者web等其他方式提取。

26. 支持两种数据源,一种是串口和网络通过协议采集设备数据,一种是数据库采集。数据库采集模式可以作为通用的系统使用。

27. 自带设备模拟工具,支持16个设备数据模拟,同时还带数据库数据模拟,以便在没有设备的时候测试数据。

28. 默认通信协议采用modbus协议,后期增加mqtt等物联网协议的支持,做成通用系统。

29. 支持所有windows操作系统+linux操作系统和其他操作系统。

三、效果图

四、核心代码

t Designer中有很多UI界面组件,每种组件相对应有可设置的属性,本篇博文来让我们简单了解一下吧~

1、界面组件

在Qt Designer中,提供了八大类界面可视化组件分别为:布局组件(Layouts)、分隔组件(Spacers)、按钮组件(Buttons)、表项视图(Item Views)、表项组件(Item Widgets)、容器组件(Containers)、输入组件(Input Widgets)、显示组件(Display Widgets),在Qt Designer的应用界面设计时,可以将各种功能的组件拖拽到窗口上进行应用的可视化界面设计,而每种组件又可以指定不同的属性。

1.1、布局组件(Layouts)

布局组件包括:Vertical Layout(水平布局)、Horizontal Layout(垂直布局)、Grid Layout(网格布局)、Form Layout(表单布局)。

1.2、分隔组件(Spacers)

分隔组件包括:Horizontal Spacer(水平分隔)、Vertical Spacer(垂直分隔)。

1.3、按钮组件(Buttons)

按钮组件包括:Push Button(按钮)、Tool Button(工具按钮)、Radio Button(单选框)、Check Box(复选框)、Command Link Button(命令链接按钮)、Dialog Button Box(选择按钮)。

1.4、表项视图(Item Views)

表项视图包括:List View(列表视图)、Tree View(树状视图)、Table View(表格视图)、Column View(列表视图)、Undo View(撤销视图)。

1.5、表项组件(Item Widgets)

表项组件包括:List Widget(列表表项)、Tree Widget(树状表项)、Table Widget(表格表项)。

1.6、容器组件(Containers)

容器组件包括:Group Box(组合框,可以在内部添加内容,并修改标题头)、Scroll Area(带滑动条的框)、Tool Box(抽屉式框)、Tab Widget(标签式框)、Stacked Widget(栈式,需要信号启动)、Frame(带边框的布局)、Widget(不带边框的布局)、MDI Area(分栏显示)、Dock Widget(浮动窗口)、QAxWidget(只可以在Windows环境使用)。

1.7、输入组件(Input Widgets)

输入组件包括:Combo Box(下拉选框)、Font Combo Box(下拉字体框)、Line Edit(行编辑区)、Text Edit(文本编辑区,只可以查看文字、图片和动画)、Plain Text Edit(文字编辑框)、Spin Box(调整数字框)、Double Spin Box(浮点型数字调整框)、Time Edit(时间)、Data Edit(日期)、Data/Time Edit(时间和日期)、Dial(罗盘)、Horizontal Scroll Bar(水平滚动条)、Vertical Scroll Bar(垂直滚动条)、Horizontal Slider(水平滑动条)、Vertical Slider(垂直滑动条)、Key Sequence Edit(快捷方式)。

1.8、显示组件(Display Widgets)

显示组件包括:Label(标签组件,可查看文本、网页、图片和动画等)、Text Browser(文本框)、Graphics View(绘图工具)、Calendar Widget(日历)、LCD Number(LCD 数码管)、Progress Bar(进度条)、Horizontal Line(水平分割线)、Vertical Line(垂直分割线)、OpenGL Widget(OpenGL(Open Graphics Library,开放图形库)图形渲染的部件,可以在PyQt和Qt的应用中显示图形(包括2D和3D图形))、QQuickWidget(加载QML文件)。

2、组件属性

第二部分有较多内容引用、学习该文章:Designer组件属性编辑界面中QWidget类相关属性详解,很多详细知识点可以参照该博文。

在Qt Designer中的每种组件属性编辑部分可以进行设置,如下图所示:

每种组件的属性会有所不同之处,这里以QWidget窗口为例,简单聊聊其属性,如下所示:

让我们一起看看吧~

可以看到,最顶层的节点为组件对应的父类(Form),从上往下排列的节点,基本按照父类在上,子类在下的方式排列,很好的体现了类的继承关系以及相关属性是哪个类提供的。

enabled属性

enabled属性用于表示组件是否可用,一个组件的部件可以接收和处理鼠标和键盘事件,当组件不可用时则无法接收和处理鼠标和键盘事件。

enabled属性缺省值为True,有些组件在被禁用时会以不同的方式显示自己。例如,按钮可能会将其标签显示灰色。

控制组件大小的属性有:geometry 、sizePolicy、minimumSize、maximumSize、sizeIncrement和baseSize,用于控制组件的初始大小以及动态调整大小的控制。属性配置界面的geometry定义了组件的初始大小,其他属性都与组件大小调整时控制组件的大小相关。

geometry属性

geometry属性保存组件相对于其父级对象的位置和大小,Qt实际上是以一个长方形来表示组件的位置和大小的,包括左上角的坐标位置、长和宽。

sizePolicy属性

sizePolicy属性用于说明组件在布局管理中的缩放方式,当部件没有在布局管理器中时,该设置无效。

sizePolicy属性由四个值组成,分别是水平策略、垂直策略、水平伸展和垂直伸展。

实践可参见:Python-PyQt5开发学习笔记(二):Layout(布局)

minimumSize属性

mimimumSize属性表示组件能被缩小到的最小尺寸,单位为像素,缩小到该尺寸后不能再进一步缩小了。如果组件在布局管理器中,且布局管理器也设置了最小尺寸,则部件本身的最小尺寸以部件的mimimumSize为准,布局管理器设置的不起作用。

maximumSize属性

maximumSize属性表示组件能被放大到的最大尺寸,放大到该尺寸后不能再进一步放大了。组件的缺省最大值为:(16777215,16777215)。

sizeIncrement属性

sizeIncrement属性表示组件调整大小时的每次变化的增量大小(单位:像素)的基数,实际调整大小计算公式如下: width=baseSize().width() + i * sizeIncrement().width() height=baseSize().height() + j * sizeIncrement().height()

其中i,j为非负整数。

baseSize属性

baseSize属性是组件的基础大小(单位:像素),如果组件设定了sizeIncrement,该属性用于在调整组件尺寸时计算组件应该调整到的合适值,这个属性缺省值是(0,0)。

palette属性

palette属性是调色板作用,管理着控件和窗体的所有颜色,可用于管理控件的外观显示以及设置组成。

font属性

font属性中可以设置组件的字体属性,包括字体的字体簇(Family)、大小(Size)、是否粗体(Bold)、是否斜体(Italic)、是否带下划线(Underline)、是否带删除线(Strikeout)等。

cursor属性

cursor属性保存组件的鼠标光标形状,当鼠标位于该组件上时就会呈现该属性设置的光标形状,可取值的范围及含义如下图所示:

mouseTracking属性

mouseTracking属性用于保存是否启用鼠标跟踪,缺省情况是不启用的。不启用的情况下,对应部件只接收在鼠标移动同时至少一个鼠标按键按下时的鼠标移动事件,启用鼠标跟踪的情况下,任何鼠标移动事件部件都会接收。

tabletTracking属性

tabletTracking属性保存是否启用组件的平板跟踪,缺省是不起用的。不启用平板跟踪的情况下,部件仅接收触控笔与平板接触或至少有个触控笔按键按下时的触控笔移动事件。 如果组件启用了平板跟踪功能,部件能接收触控笔靠近但未真正接触平板时的触控笔移动事件,这可以用于监视操作位置以及部件的辅助操作功能(如旋转和倾斜),并为图形界面提供这些操作的信息接口。

focusPolicy属性

focusPolicy属性可以设置组件的焦点策略。设置参数说明如下所示:

  • NoFocus:组件不支持焦点;
  • TabFocus:Tab键获取焦点;
  • ClickFocus:鼠标按下获取焦点;
  • StrongFocus:Tab键和鼠标按下获取焦点;
  • WheelFocus:鼠标轮滚动获取焦点。

contextMenuPolicy属性

contextMenuPolicy属性是组件的快捷菜单策略,快捷菜单通过在部件上点击鼠标右键触发。设置参数说明如下所示:

acceptDrops属性

acceptDrops属性表示当前组件是否接受鼠标拖放事件,鼠标拖放应该是与鼠标拖拽结合在一起的,在Qt Designer中可以通过属性acceptDrops设置部件是否接受鼠标拖放事件。如果部件接受拖放,则在鼠标拖放时,拖放事件会发送给鼠标当前光标下接受拖放的第一个部件。

如果组件设置了acceptDrops属性为True,则就是通知系统该组件可接受鼠标拖放事件。

windowTitel属性

windowTitle属性是对窗口标题进行设置。

windowIcon属性

windowIcon属性是对窗口图标进行设置。

windowOpacity属性

windowOpacity属性为浮点数,表示组件透明度,为1完全不透明,为0完全透明,缺省是1。

toolTip属性

toolTip属性设置组件的toolTip提示信息,toolTip提示信息在鼠标放到控件上会浮动出一个小框显示提示信息。

toolTipDuration属性

toolTipDuration属性控制toolTip提示信息显示的时长,单位是毫秒,如果设置为-1,则显示时长根据toolTip内容的长度来计算。

statusTip属性

statusTip属性保存statusTip提示信息,statusTip提示信息在鼠标放到控件上时在窗口的状态栏显示提示信息,如果窗口无状态栏则不显示。statusTip属性缺省值为空字符串。

whatsThis属性

whatsThis属性保存组件的帮助信息。whatsThis的帮助信息一般在组件获得焦点后按Shift+F1弹出显示,如果这个快捷键被别的功能占用,则whatsThis的帮助信息可能无法展示。有些对话窗提供一个带问号的按钮可以点击显示whatsThis的帮助信息。whatsThis属性缺省值为空字符串。

accessibleName属性

accessibleName属性是辅助阅读中显示的组件的名称,用于残疾人辅助阅读。对于大多数小部件,无需设置此属性,因为Qt会调用部件相关属性显示,如按钮将显示按钮的文本,但当小部件不提供任何文本时,设置此属性很重要。例如,只包含图标的按钮需要将此属性设置为与屏幕阅读器一起使用。此属性默认为空。

accessibleDescription属性

accessibleDescription属性保存辅助技术所看到的部件描述,用于残疾人辅助阅读。是对accessibleName属性的补充说明。此属性默认为空。

layoutDirection属性

layoutDirection属性保存的是组件的布局方向,有三个取值:

  • LeftToRight:从左到右布局;
  • RightToLeft:从右到左布局;
  • LayoutDirectionAuto:自动布局。

autoFillBackground属性

autoFillBackground属性可以确认组件背景是否自动填充。

styleSheet属性

styleSheet属性是定义组件外观的属性样式表,在Qt中styleSheet样式表是类似于html的css样式一样的方法,只是专门为Qt中的部件开发的。styleSheet的定义语法也是类似CSS,并且是跨平台支持的。

locale属性

locale属性用于设置语言环境,包括语言和国家。如果一个部件没有设置语言环境,则使用父对象的语言环境或者默认语言环境(如果部件是顶层部件)。

windowFilePath属性

windowFilePath属性仅对窗口对象有效,用于关联一个窗口和对应的文件及路径。 当窗口没有设置标题属性的情况下,则窗口标题展示展示windowFilePath对应的文件名的信息(路径信息不展示),如果二者都设置,则优先使用窗口标题属性的设置作为标题。

该属性缺省为空,这个功能在窗口打开文件进行操作时可以使用来标记打开的文件。

inputMethodHints属性

inputMethodHints属性只对输入组件有效,输入法使用它来检索有关输入法应如何操作的提示,例如,如果设置了只允许输入数字的标志,则输入法可能会更改其可视组件,以反映只能输入数字。相关取值及含义如下:

  • ImhNone:没有提示;
  • ImhHiddenText:输入时不显示输入字符;
  • ImhSensitiveData:输入的文本不会由活动输入法存储在任何持续性存储中;
  • ImhNoAutoUppercase:输入法不可在句子结束时自动切换到大写;
  • ImhPreferNumbers:数字优先(不是必须);
  • ImhPreferUppercase:大写字母优先(不是必须);
  • ImhPreferLowercase:小写字母优先(不是必须);
  • ImhNoPredictiveText:输入时不使用联想预测文字;
  • ImhData:文本编辑器用于日期字段输入;
  • ImhTime:文本编辑器用于时间字段输入;
  • ImhPreferLation:拉丁语字符优先(不是必须);
  • ImhMultiLine:可以在文本字段中输入多行;
  • ImhNoEditMenu:不适用内置编辑菜单;
  • ImhNoTextHandles:不使用内置文本光标和选择操作方式;
  • ImhDigitsOnly:只允许数字;
  • lmhFormattedNumbersOnly:只允许输入数字(包括小数点和负数符号);
  • lmhUppercaseOnly:只允许输入大写字符;
  • lmhLowercaseOnly:只允许输入小写字符;
  • lmhDialableCharactersOnly:只允许输入适合电话拨号的字符;
  • lmhEmailCharactersOnly:只允许输入适合电子邮箱地址的字符;
  • lmhUrlCharactersOnly:只允许输入适合URL的字符;
  • lmhLatinOnly:只允许输入拉丁语字符;
  • lmhExclusivelnputMask:若使用了任何独占标志,此掩码非零。

windowModality属性

windowModality属性只对窗口对象有效,保存的是哪些类型的窗口被模式窗口阻塞。模式窗口防止其他窗口中的部件获取输入。此属性的值控制对应窗口可见时阻塞哪些类型的窗口获取输入。在模式窗口可见时更改此属性无效。相关取值及含义如下:

  • NonModal:窗口不是模式窗口;
  • WindowModal:窗口是单窗口层次结构的模式,并阻止其父窗口、所有祖父母窗口以及其父窗口和祖父母窗口的所有兄弟窗口获得瑜入;
  • ApplicationModal:窗口是应用模式窗口,阻塞所有其他应用窗口获得输入。

、前言

大屏地图模块采用浏览器模块+echart组件,Qt自带了webkit或者webengine模块,其中在win上mingw编译器的Qt5.6以后的版本,没有了浏览器模块,这个就需要用第三方的浏览器模块比如miniblink或者cef等,个人偏好miniblink因为足够简单。为了能够兼容所有的Qt版本和应用场景,特意专门写了通用浏览器控件独立的类webview,只要new即可,会自动判断Qt版本以及存在哪种浏览器模块就用哪种,优先采用Qt自带的浏览器模块,除非手动指定miniblink就用miniblink浏览器模块。

中间大屏地图多种样式:

  • 静态图片:存在资源文件中的静态图片文件;
  • 闪烁效果:中国地图不同城市闪烁点效果;
  • 迁徙效果:中国地图不同城市飞机迁徙效果;
  • 世界地图:世界地图不同国家飞机迁徙效果;
  • 区域地图:指定某个省市不同县城闪烁点效果,不同颜色点;

二、功能特点

  1. 采用分层设计,整体总共分三级界面,一级界面是整体布局,二级界面是单个功能模块,三级界面是单个控件。
  2. 子控件包括饼图、圆环图、曲线图、柱状图、柱状分组图、横向柱状图、横向柱状分组图、合格率控件、百分比控件、进度控件、设备状态面板、表格数据、地图控件、视频控件等。
  3. 二级界面可以自由拖动悬浮,支持最小化隐藏、最大化关闭、响应双击自定义标题栏。
  4. 数据源支持模拟数据(默认)、数据库采集、串口通信(需定制)、网络通信(需定制)、网络请求等,可自由设定每个子界面的采集间隔即数据刷新频率。
  5. 采用纯QWidget编写,亲测Qt4.6到Qt6.2任意版本,理论上支持后续其他Qt版本。
  6. 超强跨平台,亲测windows、linux、mac、国产uos、国产银河麒麟kylin等系统,效果完美,同时还支持嵌入式linux比如树莓派、香橙派、全志、imx6等。
  7. 同时集成了自定义控件、qchart饼图、echart地图等功能。
  8. 内置多套配色风格样式(紫色、蓝色、深蓝、黑色),默认紫色,自适应任意分辨率。
  9. 可设置系统标题、目标分辨率、布局方案,启动立即应用。
  10. 可设置主背景颜色、面板颜色、十字线游标颜色等各种颜色。
  11. 可设置多条曲线不同颜色,没有设置颜色的情况下内置多套精美颜色随机应用。
  12. 可设置标题栏背景颜色、文字颜色。
  13. 可设置曲线图表背景颜色、文字颜色、网格颜色。
  14. 可设置正常颜色、警戒颜色、报警颜色、禁用颜色、百分比进度颜色。
  15. 可分别设置各种字体大小,比如全局字体、软件名称、标题栏、子标题栏、加粗标签等。
  16. 可设置标题栏高度、表头高度、行高度。
  17. 曲线支持游标、定位线、悬停高亮数据点、悬停显示值。
  18. 柱状图支持顶部(可设置顶端、上部、中间、底部)显示数据,全部自适应计算位置。
  19. 支持平滑曲线,内置多种平滑曲线算法,还支持面积图平滑。
  20. 面积图填充颜色可选多种规则比如单色透明度填充、透明度渐变填充等。
  21. 数据库支持sqlite、mysql、postgresql、oracle、国产人大金仓等数据库。
  22. 主界面直接鼠标右键切换布局、配色方案、关闭开启某个二级窗体。
  23. 自动记忆所有子窗口的大小和位置,下次启动立即应用。
  24. 动态加载布局方案菜单,可以动态新建布局、恢复布局、保存布局、另存布局等,用户可以制造任意布局。
  25. 二级窗体,双击从主窗体分离出来浮动,可以自由调整大小。再次双击标题栏最大化,再次双击还原。
  26. 子模块也可以全屏显示作为一个大屏,这样就可以一个大屏拓展出多个子大屏,放大查看子模块的数据详情,适用多屏展示。
  27. 每个模块都可以自定义采集速度,如果是数据库采集会自动排队处理,后期还可以拓展每个子模块都独立的数据库采集。
  28. 提供系统设置模块进行整体的配置参数设置,效果立即应用。
  29. 提供精美炫酷的大屏地图模块,包括静态图片、闪烁效果、迁徙效果、世界地图、区域地图等,可指定点的经纬度坐标,识别单击响应,可以做地图跳转等,每个点都可以不同的颜色和提示信息。
  30. 除了提供大屏系统外,还将每个模块都做了独立的模块示例界面,每个模块都可以独立学习使用,里面用到的控件也单独做了控件示例界面,方便学习每个控件如何使用。
  31. 非常详细的开发和使用手册,其中包括数据库说明、模块对照图、控件对照图、项目结构、代码说明(精确到每个类)、演示demo、使用方法等。

三、体验地址

  1. 体验地址:https://pan.baidu.com/s/1d7TH_GEYl5nOecuNlWJJ7g 提取码:01jf 文件名:bin_bigscreen.zip。
  2. 国内站点:https://gitee.com/feiyangqingyun
  3. 国际站点:https://github.com/feiyangqingyun
  4. 个人主页:https://blog.csdn.net/feiyangqingyun
  5. 知乎主页:https://www.zhihu.com/people/feiyangqingyun/
  6. 在线文档:https://feiyangqingyun.gitee.io/qwidgetdemo/bigscreen/

四、效果图

五、核心代码