HTML⽹易云⾳乐页⾯设计,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
html播放音乐代码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代码的交互打算写在下篇⽂章，不然内容太多就不利于理解和阅读了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。