QtDesigner实现网易云音乐助手的页面设计

上篇文章介绍了PyQt5在PyCharm中的应用,那么现在就实战下,把爬取网易云音乐歌词的程序使用GUI编程做出来吧。

1.设计

使用墨刀大体设计了一个很粗略的原型图




2.实现

1).设置主程序大小

新建了MainWindow后,在右侧PropertyEditor中设置minimumSize和maximumSize为设计图中的730px*540px,这两个值为一致的话则为固定窗口大小。


2).设置Tab Widget

在左侧把TabWidget拖到主程序中,然后在右侧设置geometry中x,y为0,0 让其顶住主程序的左上角,然后再设置宽高。


3).设置背景

不管怎么样,必须得好看呀,所以背景图必不可少呀。
可以使用Lable实现,把Label拖动过去,清空默认内容,大小拖动到满屏,然后在右侧找到QLabel这个元素使用Pixmap的这个是Lable用来加载图片的方法,我们把自己喜欢的背景图片加上去。


4).设置内容

a).设置搜索框

首先设置搜索框,使用Line Edit拖动过去后点击右键选择 Change Style Sheet 再选择Add Color中的background-color设置如图Alpha值为200,右侧的placeholderText设置提醒内容
同样右键选择Change ObjectName 命名为 le_search


b).设置按钮

使用Push Button组件,拖动好大小后,在右侧输入text和选择icon,然后再设置背景和Alpha值。
然后搜索按钮右键ChangeObjectName为 searchBtn,下载为 downloadBtn


c).设置列表

使用List Widget组件,拖动好大小后,点击右键选择 Change Style Sheet 再选择Add Color中的background-color设置如图Alpha值为100,歌手列表名改为lw_singers,歌曲列表为lw_songs


d).设置说明

使用Text Browser组件,拖动好大小后,点击右键选择 Change Style Sheet 再选择Add Color中的background-color设置如图Alpha值为0,Add Font 中设置字体和字体大小



双击此组件,然后编辑文字内容


5).设置Tab

在QTabWidget中设置currentTabText 和 currentTabIcon


6).设置生成词云页

其他操作类似上个Tab页,这里用Group Box组件,拖动到页面调整大小,然后右侧设置title


7).设置词云内容

使用Label组件作为标题,使用Line Edit作为文件内容框,使用Push Button组件作为按钮,字体和图片项一样。
ObjectName依次设置为:le_word_file、word_file_btn;le_word_font、word_font_btn;le_word_img、word_img_btn


8).设置词云操作

使用Group Box组件做为底框,使用Push Button组件作为按钮,在右边设置icon和text,ObjectName设置为createBtn、downBtn


9).使用说明

使用Group Box组件做为底框,使用Text Browser组件作为文本输入内容即可。


3.总结

使用Qt Designer可以快速,便捷的开发GUI页面,非常友好。
这里只实现了GUI页面的具体实现步骤,相当于只实现了MVC的V层,和Python代码的交互打算写在下篇文章,不然内容太多就不利于理解和阅读了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。