PyQt5中带框架的自定义标题栏

2022-01-12 00:00:00 python pyqt pyqt5 qt window

问题描述

我正在开发一个支持开源降价的 Windows/Linux 最小笔记应用程序.我正在尝试删除标题栏并添加我自己的按钮.我想要一个只有两个自定义按钮的标题栏，如图

目前我有这个:

我试过修改窗口标志:

没有窗口标志，窗口既可调整大小又可移动.但没有自定义按钮.
使用self.setWindowFlags(QtCore.Qt.FramelessWindowHint)，窗口没有边框，但不能移动或调整窗口大小
使用self.setWindowFlags(QtCore.Qt.CustomizeWindowHint)，窗口可以调整大小但不能移动，也不能去掉窗口顶部的白色部分.

任何帮助表示赞赏.您可以在 GitHub

解决方案

以下是您必须遵循的步骤:

拥有您的 MainWindow，无论是 QMainWindow、QWidget，还是您想要继承的任何 [widget].
设置它的标志，self.setWindowFlags(Qt.FramelessWindowHint)
实现自己的移动.
实现您自己的按钮(关闭、最大、最小)
实现您自己的调整大小.

这里有一个小例子，它实现了移动和按钮.您仍然应该使用相同的逻辑来实现调整大小.

导入系统从 PyQt5.QtCore 导入 QPoint从 PyQt5.QtCore 导入 Qt从 PyQt5.QtWidgets 导入 QApplication从 PyQt5.QtWidgets 导入 QHBoxLayout从 PyQt5.QtWidgets 导入 QLabel从 PyQt5.QtWidgets 导入 QPushButton从 PyQt5.QtWidgets 导入 QVBoxLayout从 PyQt5.QtWidgets 导入 QWidget类主窗口(QWidget):def __init__(self):超级(主窗口，自我).__init__()self.layout = QVBoxLayout()self.layout.addWidget(MyBar(self))self.setLayout(self.layout)self.layout.setContentsMargins(0,0,0,0)self.layout.addStretch(-1)self.setMinimumSize(800,400)self.setWindowFlags(Qt.FramelessWindowHint)self.pressing = FalseMyBar 类(QWidget):def __init__(自我，父母):超级(我的酒吧，自我).__init__()self.parent = 父母打印(self.parent.width())self.layout = QHBoxLayout()self.layout.setContentsMargins(0,0,0,0)self.title = QLabel("我自己的酒吧")btn_size = 35self.btn_close = QPushButton("x")self.btn_close.clicked.connect(self.btn_close_clicked)self.btn_close.setFixedSize(btn_size,btn_size)self.btn_close.setStyleSheet("背景色:红色；")self.btn_min = QPushButton("-")self.btn_min.clicked.connect(self.btn_min_clicked)self.btn_min.setFixedSize(btn_size, btn_size)self.btn_min.setStyleSheet("背景色:灰色；")self.btn_max = QPushButton("+")self.btn_max.clicked.connect(self.btn_max_clicked)self.btn_max.setFixedSize(btn_size, btn_size)self.btn_max.setStyleSheet("背景色:灰色；")self.title.setFixedHeight(35)self.title.setAlignment(Qt.AlignCenter)self.layout.addWidget(self.title)self.layout.addWidget(self.btn_min)self.layout.addWidget(self.btn_max)self.layout.addWidget(self.btn_close)self.title.setStyleSheet("""背景颜色:黑色；白颜色;""")self.setLayout(self.layout)self.start = QPoint(0, 0)self.pressing = Falsedef resizeEvent(self, QResizeEvent):超级(MyBar，自我).resizeEvent(QResizeEvent)self.title.setFixedWidth(self.parent.width())def mousePressEvent(自我，事件):self.start = self.mapToGlobal(event.pos())self.pressing = 真def mouseMoveEvent(自我，事件):如果自压:self.end = self.mapToGlobal(event.pos())self.movement = self.end-self.startself.parent.setGeometry(self.mapToGlobal(self.movement).x(),self.mapToGlobal(self.movement).y(),self.parent.width(),self.parent.height())self.start = self.enddef mouseReleaseEvent(self, QMouseEvent):self.pressing = Falsedef btn_close_clicked(self):self.parent.close()def btn_max_clicked(self):self.parent.showMaximized()def btn_min_clicked(self):self.parent.showMinimized()如果 __name__ == "__main__":应用程序 = QApplication(sys.argv)mw = 主窗口()mw.show()sys.exit(app.exec_())

这里有一些提示:

选项 1:

在每个角落和侧面都有一个带有小部件的 QGridLayout(例如左、左上、菜单栏、右上、右、右下、右下和左下)
使用方法 (1)，您会知道在单击每个边框时，您只需定义每个尺寸并将每个尺寸添加到它们的位置.
当你点击每一个时，以各自的方式对待它们，例如，如果你点击左边的并拖动到左边，你必须将它调整大，同时将它向左移动，这样它就会似乎停在了正确的位置并增加了宽度.
将此推理应用于每个边缘，每个边缘都以它必须的方式行事.

选项 2:

您可以通过点击位置检测您正在点击的位置，而不是使用 QGridLayout.
验证点击的x是否小于移动位置的x，以了解它是向左还是向右移动以及被点击的位置.
计算方法同Option1

选项 3:

可能还有其他方法，但我只是想到了这些.例如，使用您说可以调整大小的 CustomizeWindowHint，因此您只需要实现我给您的示例即可.漂亮！

提示:

小心localPos(在自己的小部件内部)，globalPos(与您的屏幕相关).例如:如果您单击左侧小部件的最左侧，它的x"将为零，如果您单击中间(内容)的最左侧，它也将为零，尽管如果您 mapToGlobal 您将有不同的值根据屏幕的位置.
在调整大小或移动时要注意，当您必须增加宽度或减少宽度，或者只是移动，或两者兼而有之时，我建议您在实施之前先在纸上绘制并弄清楚调整大小的逻辑是如何工作的蓝色的.

祝你好运:D

I'm working on an opensource markdown supported minimal note taking application for Windows/Linux. I'm trying to remove the title bar and add my own buttons. I want something like, a title bar with only two custom buttons as shown in the figure

Currently I have this:

I've tried modifying the window flags:

With not window flags, the window is both re-sizable and movable. But no custom buttons.
Using self.setWindowFlags(QtCore.Qt.FramelessWindowHint), the window has no borders, but cant move or resize the window
Using self.setWindowFlags(QtCore.Qt.CustomizeWindowHint), the window is resizable but cannot move and also cant get rid of the white part at the top of the window.

Any help appreciated. You can find the project on GitHub here.

Thanks..

This is my python code:

from PyQt5 import QtCore, QtWidgets, QtWebEngineWidgets, uic
import sys
import os
import markdown2 # https://github.com/trentm/python-markdown2
from PyQt5.QtCore import QRect
from PyQt5.QtGui import QFont

simpleUiForm = uic.loadUiType("Simple.ui")[0]

class SimpleWindow(QtWidgets.QMainWindow, simpleUiForm):
    def __init__(self, parent=None):
        QtWidgets.QMainWindow.__init__(self, parent)
        self.setupUi(self)
        self.markdown = markdown2.Markdown()
        self.css = open(os.path.join("css", "default.css")).read()
        self.editNote.setPlainText("")
        #self.noteView = QtWebEngineWidgets.QWebEngineView(self)
        self.installEventFilter(self)
        self.displayNote.setContextMenuPolicy(QtCore.Qt.NoContextMenu)
        #self.setWindowFlags(QtCore.Qt.FramelessWindowHint)

    def eventFilter(self, object, event):
        if event.type() == QtCore.QEvent.WindowActivate:
            print("widget window has gained focus")
            self.editNote.show()
            self.displayNote.hide()
        elif event.type() == QtCore.QEvent.WindowDeactivate:
            print("widget window has lost focus")
            note = self.editNote.toPlainText()
            htmlNote = self.getStyledPage(note)
            # print(note)
            self.editNote.hide()
            self.displayNote.show()
            # print(htmlNote)
            self.displayNote.setHtml(htmlNote)
        elif event.type() == QtCore.QEvent.FocusIn:
            print("widget has gained keyboard focus")
        elif event.type() == QtCore.QEvent.FocusOut:
            print("widget has lost keyboard focus")
        return False

The UI file is created in the following hierarchy

解决方案

Here are the steps you just gotta follow:

Have your MainWindow, be it a QMainWindow, or QWidget, or whatever [widget] you want to inherit.
Set its flag, self.setWindowFlags(Qt.FramelessWindowHint)
Implement your own moving around.
Implement your own buttons (close, max, min)
Implement your own resize.

Here is a small example with move around, and buttons implemented. You should still have to implement the resize using the same logic.

import sys

from PyQt5.QtCore import QPoint
from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import QApplication
from PyQt5.QtWidgets import QHBoxLayout
from PyQt5.QtWidgets import QLabel
from PyQt5.QtWidgets import QPushButton
from PyQt5.QtWidgets import QVBoxLayout
from PyQt5.QtWidgets import QWidget



class MainWindow(QWidget):

    def __init__(self):
        super(MainWindow, self).__init__()
        self.layout  = QVBoxLayout()
        self.layout.addWidget(MyBar(self))
        self.setLayout(self.layout)
        self.layout.setContentsMargins(0,0,0,0)
        self.layout.addStretch(-1)
        self.setMinimumSize(800,400)
        self.setWindowFlags(Qt.FramelessWindowHint)
        self.pressing = False


class MyBar(QWidget):

    def __init__(self, parent):
        super(MyBar, self).__init__()
        self.parent = parent
        print(self.parent.width())
        self.layout = QHBoxLayout()
        self.layout.setContentsMargins(0,0,0,0)
        self.title = QLabel("My Own Bar")

        btn_size = 35

        self.btn_close = QPushButton("x")
        self.btn_close.clicked.connect(self.btn_close_clicked)
        self.btn_close.setFixedSize(btn_size,btn_size)
        self.btn_close.setStyleSheet("background-color: red;")

        self.btn_min = QPushButton("-")
        self.btn_min.clicked.connect(self.btn_min_clicked)
        self.btn_min.setFixedSize(btn_size, btn_size)
        self.btn_min.setStyleSheet("background-color: gray;")

        self.btn_max = QPushButton("+")
        self.btn_max.clicked.connect(self.btn_max_clicked)
        self.btn_max.setFixedSize(btn_size, btn_size)
        self.btn_max.setStyleSheet("background-color: gray;")

        self.title.setFixedHeight(35)
        self.title.setAlignment(Qt.AlignCenter)
        self.layout.addWidget(self.title)
        self.layout.addWidget(self.btn_min)
        self.layout.addWidget(self.btn_max)
        self.layout.addWidget(self.btn_close)

        self.title.setStyleSheet("""
            background-color: black;
            color: white;
        """)
        self.setLayout(self.layout)

        self.start = QPoint(0, 0)
        self.pressing = False

    def resizeEvent(self, QResizeEvent):
        super(MyBar, self).resizeEvent(QResizeEvent)
        self.title.setFixedWidth(self.parent.width())

    def mousePressEvent(self, event):
        self.start = self.mapToGlobal(event.pos())
        self.pressing = True

    def mouseMoveEvent(self, event):
        if self.pressing:
            self.end = self.mapToGlobal(event.pos())
            self.movement = self.end-self.start
            self.parent.setGeometry(self.mapToGlobal(self.movement).x(),
                                self.mapToGlobal(self.movement).y(),
                                self.parent.width(),
                                self.parent.height())
            self.start = self.end

    def mouseReleaseEvent(self, QMouseEvent):
        self.pressing = False


    def btn_close_clicked(self):
        self.parent.close()

    def btn_max_clicked(self):
        self.parent.showMaximized()

    def btn_min_clicked(self):
        self.parent.showMinimized()


if __name__ == "__main__":
    app = QApplication(sys.argv)
    mw = MainWindow()
    mw.show()
    sys.exit(app.exec_())

Here are some tips:

Option 1:

Have a QGridLayout with widget in each corner and side(e.g. left, top-left, menubar, top-right, right, bottom-right, bottom and bottom left)
With the approach (1) you would know when you are clicking in each border, you just got to define each one size and add each one on their place.
When you click on each one treat them in their respective ways, for example, if you click in the left one and drag to the left, you gotta resize it larger and at the same time move it to the left so it will appear to be stopped at the right place and grow width.
Apply this reasoning to each edge, each one behaving in the way it has to.

Option 2:

Instead of having a QGridLayout you can detect in which place you are clicking by the click pos.
Verify if the x of the click is smaller than the x of the moving pos to know if it's moving left or right and where it's being clicked.
The calculation is made in the same way of the Option1

Option 3:

Probably there are other ways, but those are the ones I just thought of. For example using the CustomizeWindowHint you said you are able to resize, so you just would have to implement what I gave you as example. BEAUTIFUL!

Tips:

Be careful with the localPos(inside own widget), globalPos(related to your screen). For example: If you click in the very left of your left widget its 'x' will be zero, if you click in the very left of the middle(content)it will be also zero, although if you mapToGlobal you will having different values according to the pos of the screen.
Pay attention when resizing, or moving, when you have to add width or subtract, or just move, or both, I'd recommend you to draw on a paper and figure out how the logic of resizing works before implementing it out of blue.

GOOD LUCK :D

相关文章