一周一小步，一年一大步！欧！耶！
这周我完成了软件项目的一个重要的部件--dock栏，闲话少说，先上成品！！！
1.创建透明窗口
要实现这样一个小窗口当然需要先创建一个QWidget类，并对QWidget的背景，窗口大小，边框等等做一些小设置，这里的背景用QPinter动态描绘上边框和背景色(具体的paintEvent代码的也是从某大师那里抄的，具体哪个，我给忘了，，，)
class Dock_Win(QWidget):
def __init__(self, parent=None):
super(Dock_Win, self).__init__(parent)
self.bg_color = QColor(170, 248, 248, 230) # 设置背警色
self.fill_color = QColor(0,250,255,50) # 阴影颜色
self.initUI()
def initUI(self):
# 设置窗口透明，无边框
self.setAttribute(Qt.WA_TranslucentBackground) # 透明背景
self.setWindowFlags(Qt.FramelessWindowHint | Qt.Dialog)
# 设置窗口的大小
self.resize(462, 110)
# 设置窗口圆角+边框阴影
def paintEvent(self, event):
# 设置阴影
painter_path = QPainterPath()
painter_path.setFillRule(Qt.WindingFill)
painter = QPainter(self)
painter.setRenderHint(QPainter.Antialiasing)
painter.fillPath(painter_path, QBrush(Qt.white))
for i in range(10):
i_path = QPainterPath()
i_path.setFillRule(Qt.WindingFill)
ref = QRectF(10 - i, 10 - i, self.width() - (10 - i) * 2, self.height() - (10 - i) * 2)
i_path.addRoundedRect(ref, 20, 20)
self.fill_color.setAlpha(int(150 - i ** 0.5 * 50))
painter.setPen(self.fill_color)
painter.drawPath(i_path)
# 圆角
self.painter_rect = QPainter(self)
self.painter_rect.setRenderHint(QPainter.Antialiasing) # 抗锯齿
self.painter_rect.setBrush(self.bg_color)
self.painter_rect.setPen(Qt.transparent)
self._rect = self.rect()
self._rect.setLeft(15)
self._rect.setTop(15)
self._rect.setWidth(self._rect.width() - 15)
self._rect.setHeight(self._rect.height() - 15)
self.painter_rect.begin(self)
self.painter_rect.drawRoundedRect(self._rect, 15, 15)
self.painter_rect.end()
这样我们就得到了一个时尚而不失优雅的背景窗口
2.为窗口添加移动事件
无边框的窗口在美观的同时，也失去了边框所带来的移动便利，没有了边框的窗口，你左击并移动鼠标，跟在一个空白窗口上乱画没啥区别，所以要对主窗口的mouseMoveEvent()鼠标移动事件进行重写
# 设置窗口移动事件
# 当鼠标左击并且移动时触发窗口移动事件
def mousePressEvent(self, event):
if event.button() == Qt.LeftButton:
self.is_move = True
self.move_xy = event.globalPos() - self.pos() # 获取鼠标的移动事件
# self.parent_rect = self.parent().pos()
self.setCursor(QCursor(Qt.OpenHandCursor)) # 设置鼠标为抓手
def mouseMoveEvent(self, event):
if self.is_move:
# 移动dock栏（dock栏的坐标位置+鼠标的偏移量-dock栏的边框位置）
self.move(event.globalPos() - self.move_xy)
def mouseReleaseEvent(self, event):
self.is_move = False
self.setCursor(QCursor(Qt.ArrowCursor)) # 设置鼠标为正常
这样窗口就被你牢牢的把握在手心了
3.添加组件
光有窗口肯定是不够的，肯定要有选项啊，这里的选项我尝试了很多种，有QPushButton，有QListWidget，但由于知识储备量不够，都一一失败了(尬``)，最后还不如QLabel来的痛快，这里直接定制一个QLabel
# 重写QLabel，让其能够支持点击事件
class QLabel_Item(QLabel):
cliecked = pyqtSignal()
def __init__(self,index,QIcon_no,QIcon_on,text=None,parent=None):
super(QLabel_Item, self).__init__(parent)
self.icon_no = QIcon_no # 关闭时的图标
self.icon_on = QIcon_on # 打开时的图标
self.is_clieck = True # 默认鼠标单击为单击事件
if index != 1:
self.is_open = False # 默认为关闭状态
self.setScaledContents(True) # 设置图标铺满
self.setPixmap(QPixmap(QIcon_no)) # 设置默认图标
else:
self.is_open = True # 默认第一个图标为打开状态
self.setScaledContents(True) # 设置图标铺满
self.setPixmap(QPixmap(QIcon_on)) # 设置默认图标
if index != 3:
if index > 3:
_plus = 26
else:
_plus = 0
self.setGeometry(36*index+46*(index-1)+_plus, 26, 46, 46)
self.bottom_text = QLabel(text, parent)
self.bottom_text.setFont(QFont('华文新魏', 10))
self.bottom_text.setAlignment(Qt.AlignCenter)
self.bottom_text.setGeometry(36*index+46*(index-1)+_plus, 74, 46, 16)
else:
self.setScaledContents(True) # 设置图标铺满
self.setPixmap(QPixmap(QIcon_no)) # 设置默认图标
self.setGeometry(200, 20, 72, 72)
self.setObjectName('play')
self.setToolTip('点击播放')
def set_no(self): # 设置关闭状态
self.setPixmap(QPixmap(self.icon_no)) # 设置默认图标
# self.setStyleSheet('background-color:blue')
self.bottom_text.setStyleSheet('text-decoration:normal;') # 设置正常
def set_on(self): # 设置打开状态
self.setPixmap(QPixmap(self.icon_on)) # 设置默认图标
# self.setStyleSheet(f'background-color:red')
self.bottom_text.setStyleSheet('text-decoration:underline;') # 设置下滑线
# 正常情况下鼠标单击为触发事件，点击并移动为移动事件
def mousePressEvent(self, event):
if event.button() == Qt.LeftButton:
self.is_clieck = True
self.move_xy = event.globalPos() - self.pos() # 获取鼠标的移动事件
self.parent_rect = self.parent().pos()
def mouseMoveEvent(self, event):
self.is_clieck = False
# 移动dock栏（dock栏的坐标位置+鼠标的偏移量-控件本身坐标）
self.parent().move(self.parent_rect + event.globalPos() - self.move_xy - self.pos())
self.setCursor(QCursor(Qt.OpenHandCursor)) # 设置鼠标为抓手
self.moved = True
def mouseReleaseEvent(self, event):
if event.button() == Qt.LeftButton:
self.setCursor(QCursor(Qt.ArrowCursor)) # 设置鼠标为正常
if self.is_clieck and not self.is_open:
self.is_open = True
self.cliecked.emit()
elif self.is_clieck:
self.is_open = False
self.cliecked.emit()
- 因为QLabel本身是不支持点击事件的，所以要创建一个clieck信号
- 为了让鼠标移动到图标上和点击图标时有更好的反馈效果，QLabel_Item()创建需要传入打开时的图标，关闭时的图标，底部文本和父窗口（使用绝对布局时需要）
- 另图标的鼠标事件也是很重要的啊，鼠标的点击，移动，出入都需要图标进行一个很好的反馈效果
- 因为中间的播放按钮不是用来进行主界面口切换的，所以要进行特殊关照（你懂的<-.<-）
注：因为QLabel和QLabel是同一类的，所以创建底部文字时，不能将图标的QLabel设为父类，QLabel只能作为图片，文本的容器
4.窗口的右击菜单
窗口的右击菜单可以用来对dock栏进行一些设置，这就需要对contextMenuEvent()进行重写
def contextMenuEvent(self, event): # 连接菜单事件
# 设置右击菜单
right_menu = QMenu(self)
set_bg_color = QAction('背景色')
right_menu.addAction(set_bg_color)
# tkl_bg_color = QAction('天空蓝')
# lyh_bg_color = QAction('烈焰红')
# mmh_bg_color = QAction('柠檬黄')
# sll_bg_color = QAction('深林绿')
# jlz_bg_color = QAction('基佬紫')
# other_bg_color = QAction('自定义颜色')
# set_bg_color.addAction(tkl_bg_color)
# set_bg_color.addAction(lyh_bg_color)
# set_bg_color.addAction(mmh_bg_color)
# set_bg_color.addAction(sll_bg_color)
# set_bg_color.addAction(jlz_bg_color)
# set_bg_color.addSeparator() # 添加分隔线
# set_bg_color.addAction(set_bg_color)
# tkl_bg_color.triggered.connect(lambda: self.changeBgColor(tkl_bg_color.text()))
# lyh_bg_color.triggered.connect(lambda: self.changeBgColor(lyh_bg_color.text()))
# mmh_bg_color.triggered.connect(lambda: self.changeBgColor(mmh_bg_color.text()))
# jlz_bg_color.triggered.connect(lambda: self.changeBgColor(jlz_bg_color.text()))
# sll_bg_color.triggered.connect(lambda: self.changeBgColor(sll_bg_color.text()))
set_bg_color.triggered.connect(lambda: self.changeBgColor(''))
set_gh_color = QAction('光圈色')
right_menu.addAction(set_gh_color)
# right_menu.addMenu(set_gh_color)
# tkl_gh_color = QAction('天空蓝')
# lyh_gh_color = QAction('烈焰红')
# mmh_gh_color = QAction('柠檬黄')
# sll_gh_color = QAction('深林绿')
# jlz_gh_color = QAction('基佬紫')
# other_gh_color = QAction('自定义颜色')
# set_gh_color.addAction(tkl_gh_color)
# set_gh_color.addAction(lyh_gh_color)
# set_gh_color.addAction(mmh_gh_color)
# set_gh_color.addAction(sll_gh_color)
# set_gh_color.addAction(jlz_gh_color)
# set_gh_color.addSeparator() # 添加分隔线
# set_gh_color.addAction(other_gh_color)
#
# tkl_gh_color.triggered.connect(lambda: self.changeGhColor(tkl_gh_color.text()))
# lyh_gh_color.triggered.connect(lambda: self.changeGhColor(lyh_gh_color.text()))
# mmh_gh_color.triggered.connect(lambda: self.changeGhColor(mmh_gh_color.text()))
# jlz_gh_color.triggered.coonnect(lambda: self.changeGhColor(jlz_gh_color.text()))
# sll_gh_color.triggered.connect(lambda: self.changeGhColor(sll_gh_color.text()))
set_gh_color.triggered.connect(lambda: self.changeGhColor(''))
#
exit_menu = QAction('退 出',right_menu)
exit_menu.triggered.connect(right_menu.close)
auto_hide = QAction('自动隐藏')
right_menu.addAction(auto_hide)
right_menu.addSeparator() # 添加分割符
right_menu.addAction(exit_menu)
if not self.childAt(event.globalPos()-self.pos()): # 当鼠标右击不在图标范围内时
right_menu.exec_(event.globalPos()) # 传入鼠标的坐标
可以看到我这里原本预定了很多好看的颜色，尝试过直接对self.bg_color()进行改变，刷新界面，但不知道为什么最后只有QColorDialog成功了，无奈，只能摸摸自己所剩无几的头发，叹了叹气，放弃了，如果有大神愿为后辈指点一二，吾辈定当无比感谢！(拜托了，yyy)
因为项目的主窗口还在画饼中，所以dock栏的些许功能尚未完善
最后源码献上：代码入口
题外：
原本项目的登录界面已经做好的，而登录账号用来桂电的VPN账号，方便后续直接访问校内资源，写了篇关于调用桂电VPN接口的博客，但奈何官方对这方面的博客把控太严，无奈只能设为私密了（这里没有抱怨，而是称赞审查大大的一丝不苟，兢兢业业···(此处省略一万字)）
这里的UI还没美化完全，后期会定制qss文件专门美化的，而项目的进程不能因为部分而拖太久了
