软件界面
技术点
- 无边框设计
- 自定义右上角最大化，最小化，关闭按钮
- 界面布局能够自适应界面的放大缩小
- 按住鼠标左键能够拖动整个界面
- treewidget整体风格设计
代码
import sys
from PyQt5 import QtCore, QtGui, QtWidgets
from PyQt5.Qt import *
import time
import os
import datetime
class Window(QWidget):
def __init__(self, *args, **kwargs):
super().__init__(*args, **kwargs)
"""界面基本设置"""
self.setWindowFlags(Qt.FramelessWindowHint)
self.resize(1920, 1080)
self.move(400, 240)
"""主窗口水平布局，后面定义的控件才能显示"""
self.horizontalLayout_window = QtWidgets.QHBoxLayout(self)
self.horizontalLayout_window.setContentsMargins(1, 1, 1, 1)
self.horizontalLayout_window.setSpacing(1)
self.horizontalLayout_window.setObjectName("horizontalLayout_window")
"""右上角三个功能按钮的参数"""
self.top_margin = 1
self.btn_w = 32
self.btn_h = 32
"""右上角三个功能按钮的图片路径"""
self.BASE_DIR=os.path.dirname(sys.argv[0])
self.close_path=self.BASE_DIR+'/resource/icon/close.png'
self.max_path=self.BASE_DIR+'/resource/icon/max.png'
self.min_path=self.BASE_DIR+'/resource/icon/min.png'
self.restore_path=self.BASE_DIR+'/resource/icon/restore.png'
self.setup_ui()
def setup_ui(self):
"""在窗口的右上角添加关闭、最大化、最小化 三个按钮"""
self.close_btn = QPushButton(self)
self.close_btn.setIcon(QIcon(self.close_path))
self.close_btn.setIconSize(self.close_btn.iconSize())
self.close_btn.resize(self.btn_w, self.btn_h)
self.max_btn = QPushButton(self)
self.max_btn.setIcon(QIcon(self.max_path))
self.max_btn.setIconSize(self.max_btn.iconSize())
self.max_btn.resize(self.btn_w, self.btn_h)
self.mini_btn = QPushButton(self)
self.mini_btn.setIcon(QIcon(self.min_path))
self.mini_btn.setIconSize(self.mini_btn.iconSize())
self.mini_btn.resize(self.btn_w, self.btn_h)
def max_normal():
if self.isMaximized():
self.max_btn.setIcon(QIcon(self.max_path))
self.showNormal()
else:
self.showMaximized()
self.max_btn.setIcon(QIcon(self.restore_path))
self.max_btn.pressed.connect(max_normal)
self.close_btn.pressed.connect(lambda: self.close())
self.mini_btn.pressed.connect(lambda: self.showMinimized())
"""自定义treewidget滚动条样式"""
def custom_scrollbar(widget):
scrollBar = widget.verticalScrollBar()
scrollBar.setStyleSheet("""
QScrollBar:vertical {
border-width: 0px;
border: none;
background:rgba(64, 65, 79, 0);
width:12px;
margin: 0px 0px 0px 0px;
}
QScrollBar::handle:vertical {
background: qlineargradient(x1:0, y1:0, x2:1, y2:0,
stop: 0 #aaaaff, stop: 0.5 #aaaaff, stop:1 #aaaaff);
min-height: 20px;
max-height: 20px;
margin: 0 0px 0 0px;
border-radius: 6px;
}
QScrollBar::add-line:vertical {
background: qlineargradient(x1:0, y1:0, x2:1, y2:0,
stop: 0 rgba(64, 65, 79, 0), stop: 0.5 rgba(64, 65, 79, 0), stop:1 rgba(64, 65, 79, 0));
height: 0px;
border: none;
subcontrol-position: bottom;
subcontrol-origin: margin;
}
QScrollBar::sub-line:vertical {
background: qlineargradient(x1:0, y1:0, x2:1, y2:0,
stop: 0 rgba(64, 65, 79, 0), stop: 0.5 rgba(64, 65, 79, 0), stop:1 rgba(64, 65, 79, 0));
height: 0 px;
border: none;
subcontrol-position: top;
subcontrol-origin: margin;
}
QScrollBar::sub-page:vertical {
background: rgba(64, 65, 79, 0);
}
QScrollBar::add-page:vertical {
background: rgba(64, 65, 79, 0);
}
"""
)
"""设定widget_main"""
self.widget_main = QtWidgets.QWidget(self)
self.widget_main.setObjectName("widget_main")
"""widget_main定义水平布局"""
self.horizontalLayout_widget_main = QtWidgets.QHBoxLayout(self.widget_main)
self.horizontalLayout_widget_main.setContentsMargins(0, 0, 0, 0)
self.horizontalLayout_widget_main.setSpacing(0)
self.horizontalLayout_widget_main.setObjectName("horizontalLayout_widget_main")
"""widget_main中设定widget_left"""
self.widget_left = QtWidgets.QWidget(self.widget_main)
sizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Preferred, QtWidgets.QSizePolicy.Preferred)
sizePolicy.setHorizontalStretch(1)
sizePolicy.setVerticalStretch(0)
sizePolicy.setHeightForWidth(self.widget_left.sizePolicy().hasHeightForWidth())
self.widget_left.setSizePolicy(sizePolicy)
self.widget_left.setMaximumSize(QtCore.QSize(500, 16777215))
self.widget_left.setStyleSheet("background-color: rgb(240, 243, 246);")
self.widget_left.setObjectName("widget_left")
"""widget_left定义垂直布局"""
self.verticalLayout_widget_left = QtWidgets.QVBoxLayout(self.widget_left)
self.verticalLayout_widget_left.setObjectName("verticalLayout_widget_left")
"""widget_main中设定widget_right"""
self.widget_right = QtWidgets.QWidget(self.widget_main)
sizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Preferred, QtWidgets.QSizePolicy.Preferred)
sizePolicy.setHorizontalStretch(2)
sizePolicy.setVerticalStretch(0)
sizePolicy.setHeightForWidth(self.widget_right.sizePolicy().hasHeightForWidth())
self.widget_right.setSizePolicy(sizePolicy)
self.widget_right.setObjectName("widget_right")
"""widget_right中定义垂直布局"""
self.verticalLayout_widget_right = QtWidgets.QVBoxLayout(self.widget_right)
self.verticalLayout_widget_right.setContentsMargins(0, 0, 0, 0)
self.verticalLayout_widget_right.setSpacing(1)
self.verticalLayout_widget_right.setObjectName("verticalLayout_widget_right")
"""widget_left中设定widget_left_top"""
self.widget_left_top = QtWidgets.QWidget(self.widget_left)
sizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Preferred, QtWidgets.QSizePolicy.Preferred)
sizePolicy.setHorizontalStretch(0)
sizePolicy.setVerticalStretch(1)
sizePolicy.setHeightForWidth(self.widget_left_top.sizePolicy().hasHeightForWidth())
self.widget_left_top.setSizePolicy(sizePolicy)
self.widget_left_top.setMaximumSize(QtCore.QSize(16777215, 150))
self.widget_left_top.setObjectName("widget_left_top")
"""widget_right中设定软件标题"""
self.label_tool_name = QtWidgets.QLabel(self.widget_left_top)
self.label_tool_name.setGeometry(QtCore.QRect(70, 10, 153, 19))
self.label_tool_name.setStyleSheet("font: 75 13pt \"Arial\";")
self.label_tool_name.setAlignment(QtCore.Qt.AlignCenter)
self.label_tool_name.setObjectName("label_tool_name")
self.label_tool_name.setText("音乐播放器")
self.label_tool_name.adjustSize()
self.label_tool_version = QtWidgets.QLabel(self.widget_left_top)
self.label_tool_version.setGeometry(QtCore.QRect(130, 70, 24, 20))
self.label_tool_version.setStyleSheet("font: 6pt \"Arial\";")
self.label_tool_version.setAlignment(QtCore.Qt.AlignCenter)
self.label_tool_version.setObjectName("label_tool_version")
self.label_tool_version.setText("V1.0.1")
self.label_tool_version.adjustSize()
"""widget_left中设定widget_left_bottom"""
self.widget_left_bottom = QtWidgets.QWidget(self.widget_left)
sizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Preferred, QtWidgets.QSizePolicy.Preferred)
sizePolicy.setHorizontalStretch(0)
sizePolicy.setVerticalStretch(4)
sizePolicy.setHeightForWidth(self.widget_left_bottom.sizePolicy().hasHeightForWidth())
self.widget_left_bottom.setSizePolicy(sizePolicy)
self.widget_left_bottom.setObjectName("widget_left_bottom")
self.horizontalLayout_widget_left_bottom = QtWidgets.QHBoxLayout(self.widget_left_bottom)
self.horizontalLayout_widget_left_bottom.setContentsMargins(0, 0, 0, 0)
self.horizontalLayout_widget_left_bottom.setSpacing(0)
self.horizontalLayout_widget_left_bottom.setObjectName("horizontalLayout_widget_left_bottom")
"""widget_left_bottom中设定treewidget"""
self.treeWidget_section = QtWidgets.QTreeWidget(self.widget_left_bottom)
self.treeWidget_section.setStyleSheet("border:no;")
self.treeWidget_section.setVerticalScrollBarPolicy(QtCore.Qt.ScrollBarAlwaysOn)
self.treeWidget_section.setObjectName("treeWidget_section")
self.treeWidget_section.setColumnCount(1)
self.treeWidget_section.headerItem().setHidden(True)
font = QtGui.QFont()
font.setPointSize(13)
self.treewidget_music= QTreeWidgetItem(self.treeWidget_section)
self.treewidget_music.setText(0,'音乐')
self.treewidget_music.setCheckState(0, Qt.Checked)
self.treewidget_music.setFont(0, font)
self.treewidget_music.setExpanded(True)
self.treewidget_music_1_ = QTreeWidgetItem(self.treewidget_music)
self.treewidget_music_1_.setText(0,'民谣')
self.treewidget_music_2 = QTreeWidgetItem(self.treewidget_music)
self.treewidget_music_2.setText(0,'流行')
self.treewidget_music_3 = QTreeWidgetItem(self.treewidget_music)
self.treewidget_music_3.setText(0,'怀旧')
self.treewidget_collection= QTreeWidgetItem(self.treeWidget_section)
self.treewidget_collection.setText(0,'收藏')
self.treewidget_collection.setCheckState(0, Qt.Checked)
self.treewidget_collection.setFont(0, font)
self.treewidget_collection.setExpanded(True)
self.treewidget_collection_1 = QTreeWidgetItem(self.treewidget_collection)
self.treewidget_collection_1.setText(0,'周伦')
self.treewidget_collection_1.setExpanded(True)
self.treewidget_collection_1_1 = QTreeWidgetItem(self.treewidget_collection_1)
self.treewidget_collection_1_1.setText(0,'1. 八里香')
self.treewidget_collection_1_2 = QTreeWidgetItem(self.treewidget_collection_1)
self.treewidget_collection_1_2.setText(0,'2. 半岛铝盒')
self.treewidget_collection_1_3 = QTreeWidgetItem(self.treewidget_collection_1)
self.treewidget_collection_1_3.setText(0,'3. 麦香')
self.treewidget_collection_2 = QTreeWidgetItem(self.treewidget_collection)
self.treewidget_collection_2.setText(0,'六月天')
self.treewidget_collection_2.setExpanded(True)
self.treewidget_collection_2_1 = QTreeWidgetItem(self.treewidget_collection_2)
self.treewidget_collection_2_1.setText(0,'1. 不倔强')
self.treewidget_collection_2_2 = QTreeWidgetItem(self.treewidget_collection_2)
self.treewidget_collection_2_2.setText(0,'2. 不温柔')
self.treewidget_collection_2_3 = QTreeWidgetItem(self.treewidget_collection_2)
self.treewidget_collection_2_3.setText(0,'3. 离开土星表面')
self.treewidget_setting= QTreeWidgetItem(self.treeWidget_section)
self.treewidget_setting.setText(0,'设置')
self.treewidget_setting.setCheckState(0, Qt.Checked)
self.treewidget_setting.setFont(0, font)
self.treewidget_setting.setExpanded(True)
self.treewidget_setting_1 = QTreeWidgetItem(self.treewidget_setting)
self.treewidget_setting_1.setText(0,'用户信息')
self.treewidget_setting_1.setForeground(0,QColor(100,150,50))
self.treewidget_setting_1.setExpanded(True)
self.treewidget_setting_1_1 = QTreeWidgetItem(self.treewidget_setting_1)
self.treewidget_setting_1_1.setText(0,'1. 基本信息')
self.treewidget_setting_1_2 = QTreeWidgetItem(self.treewidget_setting_1)
self.treewidget_setting_1_2.setText(0,'2. 头像')
self.treewidget_setting_2 = QTreeWidgetItem(self.treewidget_setting)
self.treewidget_setting_2.setText(0,'软件设置')
self.treewidget_setting_2.setExpanded(True)
self.treewidget_setting_2_1 = QTreeWidgetItem(self.treewidget_setting_2)
self.treewidget_setting_2_1.setText(0,'1. 常规')
self.treewidget_setting_2_2 = QTreeWidgetItem(self.treewidget_setting_2)
self.treewidget_setting_2_2.setText(0,'2. 系统')
"""给treewidget设定自定义滚动条"""
custom_scrollbar(self.treeWidget_section)
self.horizontalLayout_widget_left_bottom.addWidget(self.treeWidget_section)
"""widget_right中设定widget_right_top"""
self.widget_right_top = QtWidgets.QWidget(self.widget_right)
sizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Preferred, QtWidgets.QSizePolicy.Preferred)
sizePolicy.setHorizontalStretch(0)
sizePolicy.setVerticalStretch(2)
sizePolicy.setHeightForWidth(self.widget_right_top.sizePolicy().hasHeightForWidth())
self.widget_right_top.setSizePolicy(sizePolicy)
self.widget_right_top.setStyleSheet("background-color: rgb(247, 249, 252);")
self.widget_right_top.setObjectName("widget_right_top")
"""widget_right_top中设定垂直布局"""
self.verticalLayout_widget_right_top = QtWidgets.QVBoxLayout(self.widget_right_top)
self.verticalLayout_widget_right_top.setObjectName("verticalLayout_widget_right_top")
self.label_latest = QtWidgets.QLabel(self.widget_right_top)
sizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Preferred, QtWidgets.QSizePolicy.Preferred)
sizePolicy.setHorizontalStretch(0)
sizePolicy.setVerticalStretch(1)
sizePolicy.setHeightForWidth(self.label_latest.sizePolicy().hasHeightForWidth())
self.label_latest.setSizePolicy(sizePolicy)
self.label_latest.setStyleSheet("font: 75 13pt \"Arial\";")
self.label_latest.setObjectName("label_latest")
self.label_latest.setText(" 最新音乐")
self.verticalLayout_widget_right_top.addWidget(self.label_latest)
self.textEdit_latest = QtWidgets.QTextEdit(self.widget_right_top)
sizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Expanding)
sizePolicy.setHorizontalStretch(0)
sizePolicy.setVerticalStretch(10)
sizePolicy.setHeightForWidth(self.textEdit_latest.sizePolicy().hasHeightForWidth())
self.textEdit_latest.setSizePolicy(sizePolicy)
self.textEdit_latest.setStyleSheet("font: 9pt \"Arial\";")
self.textEdit_latest.setObjectName("textEdit_latest")
self.verticalLayout_widget_right_top.addWidget(self.textEdit_latest)
self.label_hot = QtWidgets.QLabel(self.widget_right_top)
sizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Preferred, QtWidgets.QSizePolicy.Preferred)
sizePolicy.setHorizontalStretch(0)
sizePolicy.setVerticalStretch(1)
sizePolicy.setHeightForWidth(self.label_hot.sizePolicy().hasHeightForWidth())
self.label_hot.setSizePolicy(sizePolicy)
self.label_hot.setStyleSheet("font: 75 13pt \"Arial\";")
self.label_hot.setObjectName("label_hot")
self.label_hot.setText(" 热门推荐")
self.verticalLayout_widget_right_top.addWidget(self.label_hot)
self.textEdit_hot = QtWidgets.QTextEdit(self.widget_right_top)
sizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Expanding, QtWidgets.QSizePolicy.Expanding)
sizePolicy.setHorizontalStretch(0)
sizePolicy.setVerticalStretch(10)
sizePolicy.setHeightForWidth(self.textEdit_hot.sizePolicy().hasHeightForWidth())
self.textEdit_hot.setSizePolicy(sizePolicy)
self.textEdit_hot.setStyleSheet("font: 9pt \"Arial\";")
self.textEdit_hot.setObjectName("textEdit_hot")
self.verticalLayout_widget_right_top.addWidget(self.textEdit_hot)
"""widget_right中设定widget_right_bottom"""
self.widget_right_bottom = QtWidgets.QWidget(self.widget_right)
sizePolicy = QtWidgets.QSizePolicy(QtWidgets.QSizePolicy.Preferred, QtWidgets.QSizePolicy.Preferred)
sizePolicy.setHorizontalStretch(0)
sizePolicy.setVerticalStretch(1)
sizePolicy.setHeightForWidth(self.widget_right_bottom.sizePolicy().hasHeightForWidth())
self.widget_right_bottom.setSizePolicy(sizePolicy)
self.widget_right_bottom.setMaximumSize(QtCore.QSize(16777215, 300))
self.widget_right_bottom.setStyleSheet("background-color: rgb(247, 249, 252);")
self.widget_right_bottom.setObjectName("widget_right_bottom")
self.label_operation = QtWidgets.QLabel(self.widget_right_bottom)
self.label_operation.setGeometry(QtCore.QRect(18, 0, 151, 41))
self.label_operation.setStyleSheet("font: 75 13pt \"Arial\";")
self.label_operation.setObjectName("label_operation")
self.label_operation.setText("Operation")
self.label_operation.adjustSize()
font_operation = QtGui.QFont()
font_operation.setFamily("Arial")
self.pushButton_play = QtWidgets.QPushButton(self.widget_right_bottom)
self.pushButton_play.setGeometry(QtCore.QRect(80, 120, 200, 60))
self.pushButton_play.setStyleSheet("QPushButton{color: #606266;background-color: #fff; border: 1px solid #dcdfe6;}\n"
"QPushButton:hover{color: #409eff;border-color: #c6e2ff;background-color: #ecf5ff}\n"
"QPushButton:checked{color: #409eff;border-color: #c6e2ff;background-color: #ecf5ff;}\n"
"QPushButton:pressed{color: #3a8ee6;border-color: #3a8ee6;background-color: #ecf5ff;}\n"
"")
self.pushButton_play.setText('播放')
self.pushButton_play.setObjectName("pushButton_play")
self.pushButton_next = QtWidgets.QPushButton(self.widget_right_bottom)
self.pushButton_next.setGeometry(QtCore.QRect(620, 120, 200, 60))
self.pushButton_next.setStyleSheet("QPushButton{color: #606266;background-color: #fff; border: 1px solid #dcdfe6;}\n"
"QPushButton:hover{color: #409eff;border-color: #c6e2ff;background-color: #ecf5ff}\n"
"QPushButton:checked{color: #409eff;border-color: #c6e2ff;background-color: #ecf5ff;}\n"
"QPushButton:pressed{color: #3a8ee6;border-color: #3a8ee6;background-color: #ecf5ff;}\n"
"")
self.pushButton_next.setText('下一首')
self.pushButton_next.setObjectName("pushButton_next")
self.pushButton_play.setFont(font_operation)
self.pushButton_next.setFont(font_operation)
self.pushButton_next.setEnabled(False)
self.comboBox_list = QtWidgets.QComboBox(self.widget_right_bottom)
self.comboBox_list.setGeometry(QtCore.QRect(350, 120, 200, 60))
self.comboBox_list.setFont(font_operation)
self.comboBox_list.setStyleSheet(" QComboBox {\n"
" border: 1px solid #C2C7CB;\n"
" border-radius: 4px;\n"
" padding: 1px 18px 1px 3px;\n"
" background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,\n"
" stop: 0 #F7F7F7, stop: 1 #E3E3E3);\n"
" }\n"
" QComboBox::drop-down {\n"
" subcontrol-origin: padding;\n"
" subcontrol-position: top right;\n"
" width: 20px;\n"
" border-left-width: 1px;\n"
" border-left-color: darkgray;\n"
" border-left-style: solid;\n"
" background-color: #D2D7D3;\n"
" }\n"
" QComboBox::editable {\n"
" background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,\n"
" stop: 0 #F7F7F7, stop: 1 #E3E3E3);\n"
" }")
self.comboBox_list.setObjectName("comboBox_list")
self.comboBox_list.addItem("播放列表")
self.comboBox_list.addItem("播放列表1")
self.comboBox_list.addItem("播放列表2")
self.horizontalLayout_window.addWidget(self.widget_main)
self.horizontalLayout_widget_main.addWidget(self.widget_left)
self.horizontalLayout_widget_main.addWidget(self.widget_right)
self.verticalLayout_widget_left.addWidget(self.widget_left_top)
self.verticalLayout_widget_left.addWidget(self.widget_left_bottom)
self.verticalLayout_widget_right.addWidget(self.widget_right_top)
self.verticalLayout_widget_right.addWidget(self.widget_right_bottom)
"""右上角最大，最小，还原三个按钮置顶"""
self.close_btn.raise_()
self.max_btn.raise_()
self.mini_btn.raise_()
def resizeEvent(self, a0: QtGui.QResizeEvent) -> None:
"""当窗口大小改变时，重新移动三个按钮的位置"""
self.close_btn.move(self.width() - self.btn_w, self.top_margin)
self.max_btn.move(self.width() - self.btn_w * 2, self.top_margin)
self.mini_btn.move(self.width() - self.btn_w * 3, self.top_margin)
def mousePressEvent(self, evt):
if evt.button() == Qt.LeftButton:
self.move_flag = True
self.mouse_x = evt.globalX()
self.mouse_y = evt.globalY()
self.origen_x = self.x()
self.origen_y = self.y()
def mouseMoveEvent(self, evt) -> None:
if self.move_flag:
move_x = evt.globalX() - self.mouse_x
move_y = evt.globalY() - self.mouse_y
dest_x = self.origen_x + move_x
dest_y = self.origen_y + move_y
self.move(dest_x, dest_y)
def mouseReleaseEvent(self, a0: QtGui.QMouseEvent) -> None:
self.move_flag = False
app = QApplication(sys.argv)
window = Window()
window.show()
sys.exit(app.exec_())
