Python开发音乐播放器（三）——pyqt制作音乐播放器主界面

这部分的开发真的是很伤脑筋，大概头发稀疏了点吧。在开发的过程中，发现登录效果和链接模拟登陆的方式有点欠缺，最后还是决定采用CS构架，将前端和后端分开，所以这一期就先写界面吧。
先上做好的界面：

_V[)OV7V63`3TZ]R13K(08I.png

歌单部分没有使用图片代替，代替后界面就完美了，所以暂时就这样吧。进入正题。

五、pyqt开发音乐播放器主界面

先说一下整体布局：

image.png

左侧为导航栏，右侧主界面，底部为播放相关按钮组件。

左侧：

    self.setFixedSize(960,700)
    self.main_widget = QtWidgets.QWidget()  # 创建窗口主部件
    self.main_layout = QtWidgets.QGridLayout()  # 创建主部件的网格布局
    self.main_widget.setLayout(self.main_layout)  # 设置窗口主部件布局为网格布局
    self.left_widget = QtWidgets.QWidget()  # 创建左侧部件
    self.left_widget.setObjectName('left_widget')
    self.left_layout = QtWidgets.QGridLayout()  # 创建左侧部件的网格布局层
    self.left_widget.setLayout(self.left_layout) # 设置左侧部件布局为网格
    self.main_layout.addWidget(self.left_widget,0,0,10,2) # 

其中addWidget函数的四个参数分别为：

    fromRow：控件的起始行数
    fronColumn：控件的起始列数
    rowSpan：控件跨越的行数
    column：控件跨越的列数

加按钮（此处顺序可能有点乱，理解就好）：

    self.left_close = QtWidgets.QPushButton("") # 关闭按钮
    self.left_visit = QtWidgets.QPushButton("") # 空白按钮
    self.left_mini = QtWidgets.QPushButton("")  # 最小化按钮
     
    self.left_label_1 = QtWidgets.QPushButton("在线播放")
    self.left_label_1.setObjectName('left_label')
    self.left_label_2 = QtWidgets.QPushButton("离线管理")
    self.left_label_2.setObjectName('left_label')
    self.left_label_3 = QtWidgets.QPushButton("联系与帮助")
    self.left_label_3.setObjectName('left_label')
    
    self.left_button_6 = QtWidgets.QPushButton(qtawesome.icon('fa.music',color='white'),"每日推荐")
    self.left_button_6.setObjectName('left_button')
    self.left_button_6.clicked.connect(self.onClicked1)#监听第一个界面
    
    self.left_button_1 = QtWidgets.QPushButton(qtawesome.icon('fa.home',color='white'),"本地音乐")
    self.left_button_1.setObjectName('left_button')
    self.left_button_1.clicked.connect(self.onClicked3)#监听第三个界面
    
    self.left_button_2 = QtWidgets.QPushButton(qtawesome.icon('fa.download',color='white'),"下载管理")
    self.left_button_2.setObjectName('left_button')
    self.left_button_2.clicked.connect(self.onClicked4)#监听第四个界面
    
    self.left_button_3 = QtWidgets.QPushButton(qtawesome.icon('fa.heart',color='white'),"我的歌单")
    self.left_button_3.setObjectName('left_button')
    self.left_button_3.clicked.connect(self.onClicked2)#监听第二个界面
    self.left_button_4 = QtWidgets.QPushButton(qtawesome.icon('fa.comment',color='white'),"通用设置")
    self.left_button_4.setObjectName('left_button')
    self.left_button_4.clicked.connect(self.onClicked5)#监听第五个界面
    
    self.left_button_5 = QtWidgets.QPushButton(qtawesome.icon('fa.star',color='white'),"关于我们")
    self.left_button_5.setObjectName('left_button')
    self.left_button_5.clicked.connect(self.onClicked6)#监听第六个界面
    self.left_xxx = QtWidgets.QPushButton(" ")
  
    self.left_layout.addWidget(self.left_mini, 0, 0,1,1)
    self.left_layout.addWidget(self.left_close, 0, 2,1,1)
    self.left_layout.addWidget(self.left_visit, 0, 1, 1, 1)
   
    self.left_layout.addWidget(self.left_label_1,1,0,1,3)
    self.left_layout.addWidget(self.left_button_6, 2, 0,1,3)
    self.left_layout.addWidget(self.left_button_3, 3, 0,1,3)
    self.left_layout.addWidget(self.left_label_2, 4, 0,1,3)
    self.left_layout.addWidget(self.left_button_1, 5, 0,1,3)
    self.left_layout.addWidget(self.left_button_2, 6, 0,1,3)
    self.left_layout.addWidget(self.left_button_4, 7, 0,1,3)
    self.left_layout.addWidget(self.left_label_3, 8, 0,1,3)
    self.left_layout.addWidget(self.left_button_5, 9, 0,1,3)

    self.left_close.setFixedSize(15,15) # 设置关闭按钮的大小
    self.left_visit.setFixedSize(15, 15)  # 设置按钮大小
    self.left_mini.setFixedSize(15, 15) # 设置最小化按钮大小

使用QSS样式美化（这是一个在pyqt里面使用类似于css的一个东西，懂得css的童鞋写这一部分的话很容易的）：

    self.left_close.setStyleSheet('''QPushButton{background:#F76677;border-radius:5px;}QPushButton:hover{background:red;}''')
    self.left_visit.setStyleSheet('''QPushButton{background:#F7D674;border-radius:5px;}QPushButton:hover{background:yellow;}''')
    self.left_mini.setStyleSheet('''QPushButton{background:#6DDF6D;border-radius:5px;}QPushButton:hover{background:green;}''')

    self.stackedWidget.setStyleSheet('''
        QLabel{color:white;}                                 
        
    ''')
    
    self.left_widget.setStyleSheet('''
        QPushButton{border:none;color:white;}
        QPushButton#left_label{
            border:none;
            border-bottom:1px solid white;
            font-size:18px;
            font-weight:700;
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }
        QPushButton#left_button:hover{border-left:4px solid red;font-weight:700;}
        QWidget#left_widget{
        background:gray;
        border-top:1px solid white;
        border-bottom:1px solid white;
        border-left:1px solid white;
       
    }
    ''')

结果：

46F4B40FE8DC7DE9533004581A3A972D.png

接着是右侧界面，这里右部设置为stackedWidget，可以制作类似于选项卡的效果：

    right = QFrame(self)
    self.stackedWidget = QStackedWidget(right)#右部设置为stackedWidget，可以制作类似于选项卡的效果
    #右部第一个界面布局
    self.right_widget = QtWidgets.QWidget() # 创建右侧部件
    self.right_widget.setObjectName('right_widget')
    self.right_layout = QtWidgets.QGridLayout()
    self.right_widget.setLayout(self.right_layout) # 设置右侧部件布局为网格
    self.stackedWidget.addWidget(self.right_widget)#右部第一个界面加入stackedWidget

    #右部第二个界面布局
    self.right_widget1 = QtWidgets.QWidget() # 创建右侧部件
    self.right_widget1.setObjectName('right_widget1')
    self.right_layout1 = QtWidgets.QGridLayout()
    self.right_widget1.setLayout(self.right_layout1) # 设置右侧部件布局为网格
    self.stackedWidget.addWidget(self.right_widget1)#右部第二个界面加入stackedWidget
    
    #右部第三个界面布局
    self.right_widget2 = QtWidgets.QWidget() # 创建右侧部件
    self.right_widget2.setObjectName('right_widget2')
    self.right_layout2 = QtWidgets.QGridLayout()
    self.right_widget2.setLayout(self.right_layout2) # 设置右侧部件布局为网格
    self.stackedWidget.addWidget(self.right_widget2)#右部第二个界面加入stackedWidget
    
    
    #右部第四个界面布局
    self.right_widget3 = QtWidgets.QWidget() # 创建右侧部件
    self.right_widget3.setObjectName('right_widget3')
    self.right_layout3 = QtWidgets.QGridLayout()
    self.right_widget3.setLayout(self.right_layout3) # 设置右侧部件布局为网格
    self.stackedWidget.addWidget(self.right_widget3)#右部第二个界面加入stackedWidget
    
    #右部第五个界面布局
    self.right_widget4 = QtWidgets.QWidget() # 创建右侧部件
    self.right_widget4.setObjectName('right_widget4')
    self.right_layout4 = QtWidgets.QGridLayout()
    self.right_widget4.setLayout(self.right_layout4) # 设置右侧部件布局为网格
    self.stackedWidget.addWidget(self.right_widget4)#右部第二个界面加入stackedWidget
    
    #右部第六个界面布局
    self.right_widget5 = QtWidgets.QWidget() # 创建右侧部件
    self.right_widget5.setObjectName('right_widget5')
    self.right_layout5 = QtWidgets.QGridLayout()
    self.right_widget5.setLayout(self.right_layout5) # 设置右侧部件布局为网格
    self.stackedWidget.addWidget(self.right_widget5)#右部第二个界面加入stackedWidget
    
    self.main_layout.addWidget(self.stackedWidget,0,2,10,10) 

右侧搜索框：

    #右部界面1
    
    #右侧顶部搜索框
    
    self.right_bar_widget = QtWidgets.QWidget() # 右侧顶部搜索框部件
    self.right_bar_layout = QtWidgets.QGridLayout() # 右侧顶部搜索框网格布局
    self.right_bar_widget.setLayout(self.right_bar_layout)
    self.search_icon = QtWidgets.QLabel(chr(0xf002) + ' '+'搜索  ')
    self.search_icon.setFont(qtawesome.font('fa', 16))
    self.right_bar_widget_search_input = QtWidgets.QLineEdit()
    self.right_bar_widget_search_input.setPlaceholderText("输入歌手、歌曲或用户，回车进行搜索")
     
    self.right_bar_layout.addWidget(self.search_icon,0,0,1,1)
    self.right_bar_layout.addWidget(self.right_bar_widget_search_input,0,1,1,8)
     
    self.right_layout.addWidget(self.right_bar_widget, 0, 0, 1, 9)

CL.png

推荐界面：

    #推荐界面

    self.right_recommend_label = QtWidgets.QLabel("今日推荐")
    self.right_recommend_label.setObjectName('right_lable')
     
    self.right_recommend_widget = QtWidgets.QWidget() # 推荐封面部件
    self.right_recommend_layout = QtWidgets.QGridLayout() # 推荐封面网格布局
    self.right_recommend_widget.setLayout(self.right_recommend_layout)
     
    self.recommend_button_1 = QtWidgets.QToolButton()
    self.recommend_button_1.setText("可馨HANM") # 设置按钮文本
    self.recommend_button_1.setIcon(QtGui.QIcon('./r1.jpg')) # 设置按钮图标
    self.recommend_button_1.setIconSize(QtCore.QSize(125,125)) # 设置图标大小
    self.recommend_button_1.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon) # 设置按钮形式为上图下文
     
    self.recommend_button_2 = QtWidgets.QToolButton()
    self.recommend_button_2.setText("那首歌")
    self.recommend_button_2.setIcon(QtGui.QIcon('./r2.jpg'))
    self.recommend_button_2.setIconSize(QtCore.QSize(125, 125))
    self.recommend_button_2.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon)
     
    self.recommend_button_3 = QtWidgets.QToolButton()
    self.recommend_button_3.setText("伟大的渺小")
    self.recommend_button_3.setIcon(QtGui.QIcon('./r3.jpg'))
    self.recommend_button_3.setIconSize(QtCore.QSize(125, 125))
    self.recommend_button_3.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon)
     
    self.recommend_button_4 = QtWidgets.QToolButton()
    self.recommend_button_4.setText("荣耀征战")
    self.recommend_button_4.setIcon(QtGui.QIcon('./r4.jpg'))
    self.recommend_button_4.setIconSize(QtCore.QSize(125, 125))
    self.recommend_button_4.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon)
     

    self.right_recommend_layout.addWidget(self.recommend_button_1,0,0)
    self.right_recommend_layout.addWidget(self.recommend_button_2,0,1)
    self.right_recommend_layout.addWidget(self.recommend_button_3, 0, 2)
    self.right_recommend_layout.addWidget(self.recommend_button_4, 0, 3)

     
    self.right_layout.addWidget(self.right_recommend_label, 1, 0, 1, 9)
    self.right_layout.addWidget(self.right_recommend_widget, 2, 0, 2, 9)
    
    
    
    self.right_newsong_lable = QtWidgets.QLabel("最新歌曲")
    self.right_newsong_lable.setObjectName('right_lable')
     
    self.right_playlist_lable = QtWidgets.QLabel("热门歌单")
    self.right_playlist_lable.setObjectName('right_lable')
     
    self.right_newsong_widget = QtWidgets.QWidget()  # 最新歌曲部件
    self.right_newsong_layout = QtWidgets.QGridLayout() # 最新歌曲部件网格布局
    self.right_newsong_widget.setLayout(self.right_newsong_layout)
     
    self.newsong_button_1 = QtWidgets.QPushButton("夜机      陈慧娴      永远的朋友      03::29")
    self.newsong_button_2 = QtWidgets.QPushButton("夜机      陈慧娴      永远的朋友      03::29")
    self.newsong_button_3 = QtWidgets.QPushButton("夜机      陈慧娴      永远的朋友      03::29")
    self.newsong_button_4 = QtWidgets.QPushButton("夜机      陈慧娴      永远的朋友      03::29")
    self.newsong_button_5 = QtWidgets.QPushButton("夜机      陈慧娴      永远的朋友      03::29")
    self.newsong_button_6 = QtWidgets.QPushButton("夜机      陈慧娴      永远的朋友      03::29")
    self.right_newsong_layout.addWidget(self.newsong_button_1,0,1,)
    self.right_newsong_layout.addWidget(self.newsong_button_2, 1, 1, )
    self.right_newsong_layout.addWidget(self.newsong_button_3, 2, 1, )
    self.right_newsong_layout.addWidget(self.newsong_button_4, 3, 1, )
    self.right_newsong_layout.addWidget(self.newsong_button_5, 4, 1, )
    self.right_newsong_layout.addWidget(self.newsong_button_6, 5, 1, )

    
    self.right_playlist_widget = QtWidgets.QWidget() # 播放歌单部件
    self.right_playlist_layout = QtWidgets.QGridLayout() # 播放歌单网格布局
    self.right_playlist_widget.setLayout(self.right_playlist_layout)
     
    self.playlist_button_1 = QtWidgets.QToolButton()
    self.playlist_button_1.setText("无法释怀的整天循环音乐…")
    self.playlist_button_1.setIcon(QtGui.QIcon('./p1.jpg'))
    self.playlist_button_1.setIconSize(QtCore.QSize(100, 100))
    self.playlist_button_1.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon)
     
    self.playlist_button_2 = QtWidgets.QToolButton()
    self.playlist_button_2.setText("不需要歌词,也可以打动你的心")
    self.playlist_button_2.setIcon(QtGui.QIcon('./p2.jpg'))
    self.playlist_button_2.setIconSize(QtCore.QSize(100, 100))
    self.playlist_button_2.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon)
     
    self.playlist_button_3 = QtWidgets.QToolButton()
    self.playlist_button_3.setText("那些你熟悉又不知道名字…")
    self.playlist_button_3.setIcon(QtGui.QIcon('./p3.jpg'))
    self.playlist_button_3.setIconSize(QtCore.QSize(100, 100))
    self.playlist_button_3.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon)
     
    self.playlist_button_4 = QtWidgets.QToolButton()
    self.playlist_button_4.setText("那些只听前奏就中毒的英文歌")
    self.playlist_button_4.setIcon(QtGui.QIcon('./p4.jpg'))
    self.playlist_button_4.setIconSize(QtCore.QSize(100, 100))
    self.playlist_button_4.setToolButtonStyle(QtCore.Qt.ToolButtonTextUnderIcon)
     
    self.right_playlist_layout.addWidget(self.playlist_button_1,0,0)
    self.right_playlist_layout.addWidget(self.playlist_button_2, 0, 1)
    self.right_playlist_layout.addWidget(self.playlist_button_3, 1, 0)
    self.right_playlist_layout.addWidget(self.playlist_button_4, 1, 1)
    
    
    
    self.right_layout.addWidget(self.right_newsong_lable, 4, 0, 1, 5)
    self.right_layout.addWidget(self.right_playlist_lable, 4, 5, 1, 4)
    self.right_layout.addWidget(self.right_newsong_widget, 5, 0, 1, 5)
    self.right_layout.addWidget(self.right_playlist_widget, 5, 5, 1, 4)

9P{{E)8SQPVY24_V}5SEPEF.png

接着是底部的按钮，右侧选项卡的其他界面后面再设计：

    #底部按钮
    self.right_process_bar = QtWidgets.QProgressBar()  # 播放进度部件
    self.right_process_bar.setValue(49)
    self.right_process_bar.setFixedHeight(3)  # 设置进度条高度
    self.right_process_bar.setTextVisible(False)  # 不显示进度条文字
     
    self.right_playconsole_widget = QtWidgets.QWidget()  # 播放控制部件
    self.right_playconsole_layout = QtWidgets.QGridLayout()  # 播放控制部件网格布局层
    self.right_playconsole_widget.setLayout(self.right_playconsole_layout)
     
    self.console_button_1 = QtWidgets.QPushButton(qtawesome.icon('fa.backward', color='white'), "")
    self.console_button_2 = QtWidgets.QPushButton(qtawesome.icon('fa.forward', color='white'), "")
    self.console_button_3 = QtWidgets.QPushButton(qtawesome.icon('fa.pause', color='white', font=18), "")
    self.console_button_3.setIconSize(QtCore.QSize(30, 30))
     
    self.right_playconsole_layout.addWidget(self.console_button_1, 0, 0)
    self.right_playconsole_layout.addWidget(self.console_button_2, 0, 2)
    self.right_playconsole_layout.addWidget(self.console_button_3, 0, 1)
    self.right_playconsole_layout.setAlignment(QtCore.Qt.AlignCenter)  # 设置布局内部件居中显示
     
    self.main_layout.addWidget(self.right_process_bar, 10, 0, 11, 12)
    self.main_layout.addWidget(self.right_playconsole_widget, 11, 0, 12, 12)

QSS美化，这里以黑色为主题风格：

    #右
    #搜索框进行圆角处理
    self.right_bar_widget_search_input.setStyleSheet(
    '''QLineEdit{
            border:1px solid black;
            width:300px;
            border-radius:10px;
            padding:2px 4px;
            height:30px;
    }''')
    
    #推荐模块、音乐列表模块和音乐歌单模块的标题我们也需要对其字体进行放大处理
    self.right_widget.setStyleSheet('''
    QWidget#right_widget{
        color:white;
        background:black;
        border-top:1px solid black;
        border-bottom:1px solid black;
        border-right:1px solid black;
        border-top-right-radius:10px;
        border-bottom-right-radius:10px;
    }
    QLabel#right_lable{
        border:none;
        font-size:16px;
        font-weight:700;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
''')

    self.right_recommend_widget.setStyleSheet(
    '''
        QToolButton{border:none;}
        QToolButton:hover{border-bottom:2px solid #DC143C;}
    ''')
    self.right_playlist_widget.setStyleSheet(
    '''
        QToolButton{border:none;}
        QToolButton:hover{border-bottom:2px solid #DC143C;}
    ''')
    
    
    self.right_process_bar.setStyleSheet('''
        QProgressBar::chunk {
            background-color: #DC143C;
        }
    ''')
     
    self.right_playconsole_widget.setStyleSheet('''
        QPushButton{
            border:none;
            background-color:#DC143C ;
            margin-top:25px;
        }
        
    ''')    
        
    #音乐列表

    self.right_newsong_widget.setStyleSheet('''
        QPushButton{
            border:none;
            color:white;
            font-size:12px;
            height:40px;
            padding-left:5px;
            padding-right:10px;
            text-align:left;
        }
        QPushButton:hover{
            color:black;
            border:1px solid white;
            border-radius:10px;
            background:white;
        }
    ''')

选项卡切换用到的函数：

def onClicked1(self):
    self.stackedWidget.setCurrentIndex(0)
    
def onClicked2(self):
    self.stackedWidget.setCurrentIndex(1)

def onClicked3(self):
    self.stackedWidget.setCurrentIndex(2)
    
def onClicked4(self):
    self.stackedWidget.setCurrentIndex(3)
    
def onClicked5(self):
    self.stackedWidget.setCurrentIndex(4)
    
def onClicked6(self):
    self.stackedWidget.setCurrentIndex(5)

（未完待续，如以上有疑问，不吝赐教）