一、登录界面
由于该程序会通过与数据库的交互来实现歌曲收藏等功能，故需要首先设计一个进行登录注册的界面
登录界面将与主界面同大小，且为了方便布局，设置为固定大小不可改变
为了简单方便，只设置了账号密码两个输入框以及登录注册两个按钮，如下为账户号输入框设置
登录和注册按钮设置则完全一致
最后再为他们绑定鼠标单击事件，即完成了登录界面的设计
最终大概效果如下：
二、主界面
首先进行UI设计，以方便界面布局设置，界面设计大致如下
之后就可以进行GUI编程
同样首先设置窗口大小，名称，图标，并对窗口进行部分设置
1.self.setFixedSize(960, 700)
2.self.setWindowTitle('Ken-Chy')
3.self.setWindowIcon(QIcon('favicon.ico'))
4.self.setWindowOpacity(0.9) # 设置窗口透明度
5.self.setAttribute(QtCore.Qt.WA_TranslucentBackground) # 设置窗口背景透明
6.# self.setWindowFlags(QtCore.Qt.FramelessWindowHint) # 隐藏边框
随后创建窗口部件并设置布局，由UI图我们首先可以将界面分为左右两个部件，并为它们设置Name标示，随后将左右两侧的部件加入主部件中，并为他们设置位置以及所占大小
1.self.main_widget = QtWidgets.QWidget() # 创建窗口主部件
2.self.main_layout = QtWidgets.QGridLayout() # 创建主部件的网格布局
3.self.main_widget.setLayout(self.main_layout) # 设置窗口主部件布局为网格布局
4.
5.self.left_widget = QtWidgets.QWidget() # 创建左侧部件
6.self.left_widget.setObjectName('left_widget')
7.self.left_layout = QtWidgets.QGridLayout() # 创建左侧部件的网格布局层
8.self.left_widget.setLayout(self.left_layout) # 设置左侧部件布局为网格
9.
10.self.right_widget = QtWidgets.QWidget() # 创建右侧部件
11.self.right_widget.setObjectName('right_widget')
12.self.right_layout = QtWidgets.QGridLayout()
13.self.right_widget.setLayout(self.right_layout) # 设置右侧部件布局为网格
14.
15.self.setCentralWidget(self.main_widget) # 设置窗口主部件
16.self.main_layout.addWidget(self.left_widget, 0, 0, 12, 2) # 左侧部件在第0行第0列，占8行3列
17.self.main_layout.addWidget(self.right_widget, 0, 2, 12, 10) # 右侧部件在第0行第3列，占8行9列
观察左侧部件，我们可以看到主要分为三个标签以及九个按钮
创建三个标签并为它们设置Name标示，随后创建九个按钮，同样设置Name标识，并在左侧布局中加入这些标签和按钮
1.self.left_label_1 = QtWidgets.QPushButton("每日推荐")
2.self.left_label_1.setObjectName('left_label')
3.self.left_label_2 = QtWidgets.QPushButton("我的音乐")
4.self.left_label_2.setObjectName('left_label')
5.self.left_label_3 = QtWidgets.QPushButton("联系与帮助")
6.self.left_label_3.setObjectName('left_label')
7.
8.self.left_button_1 = QtWidgets.QPushButton(qtawesome.icon('fa.music', color='white'), "热门歌曲")
9.self.left_button_1.setObjectName('left_button')
10.self.left_button_2 = QtWidgets.QPushButton(qtawesome.icon('fa.sellsy', color='white'), "热门歌手")
11.self.left_button_2.setObjectName('left_button')
12.self.left_button_3 = QtWidgets.QPushButton(qtawesome.icon('fa.film', color='white'), "热门MV")
13.self.left_button_3.setObjectName('left_button')
14.self.left_button_4 = QtWidgets.QPushButton(qtawesome.icon('fa.home', color='white'), "我的下载")
15.self.left_button_4.setObjectName('left_button')
16.self.left_button_5 = QtWidgets.QPushButton(qtawesome.icon('fa.download', color='white'), "我的收藏")
17.self.left_button_5.setObjectName('left_button')
18.self.left_button_6 = QtWidgets.QPushButton(qtawesome.icon('fa.heart', color='white'), "切换账号")
19.self.left_button_6.setObjectName('left_button')
20.self.left_button_7 = QtWidgets.QPushButton(qtawesome.icon('fa.comment', color='white'), "开发流程")
21.self.left_button_7.setObjectName('left_button')
22.self.left_button_8 = QtWidgets.QPushButton(qtawesome.icon('fa.star', color='white'), "作者博客")
23.self.left_button_8.setObjectName('left_button')
24.self.left_button_9 = QtWidgets.QPushButton(qtawesome.icon('fa.question', color='white'), "联系作者")
25.self.left_button_9.setObjectName('left_button')
26.
27.self.left_layout.addWidget(self.left_label_1, 1, 0, 1, 3)
28.self.left_layout.addWidget(self.left_button_1, 2, 0, 1, 3)
29.self.left_layout.addWidget(self.left_button_2, 3, 0, 1, 3)
30.self.left_layout.addWidget(self.left_button_3, 4, 0, 1, 3)
31.self.left_layout.addWidget(self.left_label_2, 5, 0, 1, 3)
32.self.left_layout.addWidget(self.left_button_4, 6, 0, 1, 3)
33.self.left_layout.addWidget(self.left_button_5, 7, 0, 1, 3)
34.self.left_layout.addWidget(self.left_button_6, 8, 0, 1, 3)
35.self.left_layout.addWidget(self.left_label_3, 9, 0, 1, 3)
36.self.left_layout.addWidget(self.left_button_7, 10, 0, 1, 3)
37.self.left_layout.addWidget(self.left_button_8, 11, 0, 1, 3)
38.self.left_layout.addWidget(self.left_button_9, 12, 0, 1, 3)
设置完左侧之后我们看右边的布局
最顶部是搜索框，实则就是一个输入的控件
我们首先为该位置创建一个部件并设置为网格布局
随后创建输入控件以及图标并加入到搜索框布局中
最后再将搜索框部件加入右侧布局中
接下来下面左侧是搜索结果的展示，右边是操作选项
搜索结果因为是可以点击播放的，所以与操作选项实则都是一些按钮
那么我们首先先创建两个“搜索结果”和“执行操作”两个标签
随后再创建左侧十个按钮（搜索结果），右侧六个按钮（执行操作）
并将它们加入布局即可完成
搜索结果按钮创建大致如下，可通过参数传入字符串设置按钮文字
随后同上将他们加入布局中
接着设置控件间距，并通过Name标识为他们设置样式，如
最后再为它们绑定鼠标事件即大功告成！
