241126_手把手教你使用PyQt手撸一个网易云音乐-（四）顶部导航栏以及隐藏自带标题栏并实现鼠标拖动事件

241126_手把手教你使用PyQt手撸一个网易云音乐-（四）顶部导航栏以及隐藏自带标题栏并实现鼠标拖动事件

实现顶部导航栏，还是一样的，首先先去观察人家的顶栏有什么，我们挑选一部分去实现

这是人家的顶栏，我就不实现头像和等级了，剩下的都实现一下，也很简单，就是添加一个QWidget，栅格布局（要丢进去第一个按钮之后才能更改布局哦），找图标，放按钮，替换图标，改名字的问题，前面都已经讲过了，这里不再赘述。以下是我摆放好的组件样子

这里面这个输入框有的说。很显然，输入框是用的Text Edit，但是我怎么把一个搜索的图标放进去的呢。

这里又新建了一个QWidget，相当于是外面一个大的QWidget包了里面这个专用于输入框的QWidget，里面小的这个QWidget专门用来存放一个ToolButton和Text Edit，从右上角这个对象查看器可以看得很清楚

其中新建的这几个组件，需要实现功能的只有最右边的最小化、最大化、关闭按钮，我们实现了此方法后，就可以把QT自带的标题栏隐藏掉了。自带的实在是太丑了。

给最小化按钮绑定clicked()事件，执行showMinimized()函数。

同理给最大化按钮绑定clicked()事件，但此处我们需要自定义一个方法，确实人家有showMaxmized()函数。但是我们需要考虑，当已经是最大化的情况下，我点击最大化按钮，按逻辑来说，此时应该恢复正常大小，但是我们直接使用showMaxmized无法实现。绑定自定义槽函数MaxmizeMethod()

def MaxmizeMethod(self):
    if self.isMaximized():
        self.showNormal()
    else:
        self.showMaximized()

(但是我们的窗口最大化之后布局也还是我们画好的那么小的布局，暂时没有做缩放，所以不要这个最大化也可以)

给关闭按钮绑定clicked()事件，执行close()函数

这边保存好，就可以去ui转py，删除多余代码，然后再初始化方法中，添加隐藏原有标题栏的代码

# 隐藏自带的标题栏
self.setWindowFlags(Qt.FramelessWindowHint)

然后运行我们的继承方法。

四周的组件可能都需要调整一下边距，这个无所谓，自己拉拉就行，自己觉得怎么好看怎么来。

现在突然我们的界面就好看起来了，但是，此时有一个致命的问题。就是窗口无法移动了，我们原来是拖动他的导航栏实现移动，但是现在没有导航栏了，不行了。

我们就要重写鼠标控制窗口移动的方法。

def mousePressEvent(self, event):
    if event.button() == Qt.LeftButton:
        self.m_flag = True
        self.m_Position = event.globalPos() - self.pos()  # 获取鼠标相对窗口的位置
        event.accept()
        self.setCursor(QCursor(Qt.OpenHandCursor))  # 更改鼠标图标

def mouseMoveEvent(self, QMouseEvent):
    if Qt.LeftButton and self.m_flag:
        self.move(QMouseEvent.globalPos() - self.m_Position)  # 更改窗口位置
        QMouseEvent.accept()

def mouseReleaseEvent(self, QMouseEvent):
    self.m_flag = False
    self.setCursor(QCursor(Qt.ArrowCursor))

然后再执行。可以发现我们不管点窗口哪个位置都可以移动窗口了。

Cursor(QCursor(Qt.ArrowCursor))

然后再执行。可以发现我们不管点窗口哪个位置都可以移动窗口了。


![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/951911ad59f144f6a989073a9cf156f4.gif#pic_center)