本篇概要
延续上一篇的解耦思想,我们使用Qt设计师创建一个基本的包含各个部件的图形窗口,再在逻辑代码中对图形窗口进行调用和操作。 我们使用Qt设计师创建一个稍显复杂的GUI。其中包括:
所有的步骤通过Qt设计师的拖拽就可以完成。 创建主选项卡新建一个主窗口,拖拽TabWidget部件到主窗口中: 在选项卡1中创建一个子选项卡继续使用TabWidget部件,在选项卡1中创建一个子选项卡: 在子选项卡1中添加一个树部件我们继续使用TreeWidget部件,在刚刚创建的子选项卡1中创建一个树,并添加一些信息: 在子选项卡2中添加日期和日历部件现在切换到子选项卡2中,我们使用DateEdit部件和CalendarWidget部件,在子选项卡2中添加一个日期修改框和一个日历框,采用垂直布局: 在选项卡2中添加按钮组选项卡1已经构建好了,现在切换到选项卡2。 在选项卡2中添加刻度和LCD部件我们再在选项卡2中添加一个刻度盘和LCD显示器,放置在一个组部件中: 在选项卡2中添加一个字体选择器接着,使用FontComboBox部件和Label部件,在选项卡2中添加一个字体选择器和文本显示: 在选项卡2中添加一个进度栏最后,我们使用ProcessBar部件在选项卡2中添加一个进度栏: 这样就完成了整个GUI的图形界面设计。 转换UI文件为Python文件我们首先转换设计好的UI文件为Python文件,按照之前的解耦思想,将界面代码与逻辑代码分离。
转换UI文件后,新建一个Python文件,引入转换为Python代码的GUI窗口: 运行一下,看是否正常: 新建一个逻辑类为了便于操作,我们创建一个新类MainWindow,将程序的主循环放入其中,其余的逻辑功能以类的方法的方式添加: 实现日历选择同步到日期选择器我们在选项卡1的子选项卡2中构建了一个日期修改器和一个日历。 我们在MainWindow()类中,新建一个update_date()方法,用于设置日期修改器的数值: 再新建一个update_calendar()方法,用于设置点击日历的信号/槽,将其响应到日期修改器上: 完整的代码如下: 这样,我们点击了日历上的一个日期,日期修改器上就会显示我们点击日期。 实现LCD显示器数字跟随刻度盘变化我们在组合子部件中放置了一个Dial刻度盘和LCDNumber显示器。 同样是创建两个方法: 一个用来设置LCD显示器的数字,一个用来响应刻度盘的信号。 实现按钮控制进度栏我们在选项卡2中放置了3个单选按钮,和一个进度条,现在我们让单选按钮来控制进度栏的进度。其中,第一个按钮是默认选项,第二个按钮用来重置清零进度栏,第三个按钮用来根据LCD上的数字来更新。 设置第二个按钮清零进度栏,新建一个方法:
设置第三个按钮的功能,新建两个方法:
更新字体选择我们还在选项卡2中放置了一个字体选择部件和一个label标签部件,我们可以设置选择了某个字体,就显示在label标签上。
这样,一个稍显复杂的GUI就完成了。 下一篇,我们介绍多线程在GUI中的使用。 有什么问题欢迎留言讨论! |
|