We Keep Coding

How to give border radius to QMenu in PyQt5 in PYTHON for windows [duplicate]

I am trying to override the paintEvent() of QMenu to make it have rounded corners.
The context menu should look something like this.
Here is the code I have tried But nothing appears:
from PyQt5 import QtWidgets, QtGui, QtCore
import sys
class Example(QtWidgets.QMainWindow):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
self.setGeometry(300, 300, 300, 200)
self.setWindowTitle('Context menu')
self.show()
def contextMenuEvent(self, event):
cmenu = AddContextMenu(self)
newAct = cmenu.addAction("New")
openAct = cmenu.addAction("Open")
quitAct = cmenu.addAction("Quit")
action = cmenu.exec_(self.mapToGlobal(event.pos()))
class AddContextMenu(QtWidgets.QMenu):
def __init__(self, *args, **kwargs):
super(AddContextMenu, self).__init__()
self.painter = QtGui.QPainter(self)
self.setMinimumSize(150, 200)
self.pen = QtGui.QPen(QtCore.Qt.red)
#self.setStyleSheet('color:white; background:gray; border-radius:4px; border:2px solid white;')
def paintEvent(self, event) -> None:
self.pen.setWidth(2)
self.painter.setPen(self.pen)
self.painter.setBrush(QtGui.QBrush(QtCore.Qt.blue))
self.painter.drawRoundedRect(10, 10, 100, 100, 4.0, 4.0)
self.update()
#self.repaint()
#super(AddContextMenu, self).paintEvent(event)
def main():
app = QtWidgets.QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())
if __name__ == '__main__':
main()
Note: setting a style sheet doesn't work for me:
this is what I get when using the style sheet It isn't completely rounded.
This is the paintEvent after #musicamante suggestion(This is just for him/her to check)
def paintEvent(self, event) -> None:
painter = QtGui.QPainter(self)
#self.pen.setColor(QtCore.Qt.white)
#painter.setFont(QtGui.QFont("times", 22))
#painter.setPen(self.pen)
#painter.drawText(QtCore.QPointF(0, 0), 'Hello')
self.pen.setColor(QtCore.Qt.red)
painter.setPen(self.pen)
painter.setBrush(QtCore.Qt.gray)
painter.drawRoundedRect(self.rect(), 20.0, 20.0)
and in the init()
self.pen = QtGui.QPen(QtCore.Qt.red)
self.pen.setWidth(2)

I cannot comment on the paintEvent functionality, but it is possible to implement rounded corners using style-sheets. Some qmenu attributes have to be modified in order to disable the default rectangle in the background, which gave you the unwanted result.
Here is a modified version of your Example using style-sheets + custom flags (no frame + transparent background):
from PyQt5 import QtWidgets, QtCore
import sys
class Example(QtWidgets.QMainWindow):
def __init__(self):
super().__init__()
self.initUI()
def initUI(self):
self.setGeometry(300, 300, 300, 200)
self.setWindowTitle('Context menu')
self.show()
def contextMenuEvent(self, event):
cmenu = QtWidgets.QMenu()
# disable default frame and background
cmenu.setWindowFlags(QtCore.Qt.FramelessWindowHint)
cmenu.setAttribute(QtCore.Qt.WA_TranslucentBackground)
# set stylesheet, add some padding to avoid overlap of selection with rounded corner
cmenu.setStyleSheet("""
QMenu{
background-color: rgb(255, 255, 255);
border-radius: 20px;
}
QMenu::item {
background-color: transparent;
padding:3px 20px;
margin:5px 10px;
}
QMenu::item:selected { background-color: gray; }
""")
newAct = cmenu.addAction("New")
openAct = cmenu.addAction("Open")
quitAct = cmenu.addAction("Quit")
action = cmenu.exec_(self.mapToGlobal(event.pos()))
def main():
app = QtWidgets.QApplication(sys.argv)
ex = Example()
sys.exit(app.exec_())
if __name__ == '__main__':
main()

Setting the border radius in the stylesheet for a top level widget (a widget that has its own "window") is not enough.
While the solution proposed by Christian Karcher is fine, two important considerations are required:
The system must support compositing; while this is true for most modern OSes, at least on Linux there is the possibility that even an up-to-date system does not support it by choice (I disabled on my computer); if that's the case, setting the WA_TranslucentBackground attribute will not work.
The FramelessWindowHint should not be set on Linux, as it may lead to problems with the window manager, so it should be set only after ensuring that the OS requires it (Windows).
In light of that, using setMask() is the correct fix whenever compositing is not supported, and this has to happen within the resizeEvent(). Do note that masking is bitmap based, and antialiasing is not supported, so rounded borders are sometimes a bit ugly depending on the border radius.
Also, since you want custom colors, using stylesheets is mandatory, as custom painting of a QMenu is really hard to achieve.
class AddContextMenu(QtWidgets.QMenu):
def __init__(self, *args, **kwargs):
super(AddContextMenu, self).__init__()
self.setMinimumSize(150, 200)
self.radius = 4
self.setStyleSheet('''
QMenu {{
background: blue;
border: 2px solid red;
border-radius: {radius}px;
}}
QMenu::item {{
color: white;
}}
QMenu::item:selected {{
color: red;
}}
'''.format(radius=self.radius))
def resizeEvent(self, event):
path = QtGui.QPainterPath()
# the rectangle must be translated and adjusted by 1 pixel in order to
# correctly map the rounded shape
rect = QtCore.QRectF(self.rect()).adjusted(.5, .5, -1.5, -1.5)
path.addRoundedRect(rect, self.radius, self.radius)
# QRegion is bitmap based, so the returned QPolygonF (which uses float
# values must be transformed to an integer based QPolygon
region = QtGui.QRegion(path.toFillPolygon(QtGui.QTransform()).toPolygon())
self.setMask(region)
Some side notes about your paintEvent implementation, not necessary in this specific case for the above reason, but still important (some points are related to portions of code that have been commented, but the fact that you tried them makes worth mentioning those aspects):
The QPainter used for a widget must never be instanciated outside a paintEvent(): creating the instance in the __init__ as you did is a serious error and might even lead to crash. The painter can only be created when the paintEvent is received, and shall never be reused. This clearly makes useless to set it as an instance attribute (self.painter), since there's no actual reason to access it after the paint event.
If the pen width is always the same, then just set it in the constructor (self.pen = QtGui.QPen(QtCore.Qt.red, 2)), continuously setting it in the paintEvent is useless.
QPen and QBrush can directly accept Qt global colors, so there's no need to create a QBrush instance as the painter will automatically (internally and fastly) set it: self.painter.setBrush(QtCore.Qt.blue).
self.update() should never be called within a paintEvent (and not even self.repaint() should). The result in undefined and possibly dangerous.
If you do some manual painting with a QPainter and then call the super paintEvent, the result is most likely that everything painted before will be hidden; as a general rule, the base implementation should be called first, then any other custom painting should happen after (in this case it obviously won't work, as you'll be painting a filled rounded rect, making the menu items invisible).

I have implemented round corners menu using QListWidget and QWidget. You can download the code in https://github.com/zhiyiYo/PyQt-Fluent-Widgets/blob/master/examples/menu/demo.py.

PyQt5 StatusBar Separators

How do I add vertical separators to my statusbar?
(Red arrows) in this screenshot.
And if I success this how can I show selected Line and Column?
(Blue arrows) in same screenshot.
That's for windows.

void QStatusBar::addPermanentWidget(QWidget *widget, int stretch = 0)
Adds the given widget permanently to this status bar, reparenting the widget if it isn't already a child of this QStatusBar object. The stretch parameter is used to compute a suitable size for the given widget as the status bar grows and shrinks. The default stretch factor is 0, i.e giving the widget a minimum of space.
import sys
from PyQt5.QtWidgets import (QApplication, QMainWindow, QStatusBar, QLabel,
QPushButton, QFrame)
class VLine(QFrame):
# a simple VLine, like the one you get from designer
def __init__(self):
super(VLine, self).__init__()
self.setFrameShape(self.VLine|self.Sunken)
class MainWindow(QMainWindow):
def __init__(self):
super().__init__()
self.statusBar().showMessage("bla-bla bla")
self.lbl1 = QLabel("Label: ")
self.lbl1.setStyleSheet('border: 0; color: blue;')
self.lbl2 = QLabel("Data : ")
self.lbl2.setStyleSheet('border: 0; color: red;')
ed = QPushButton('StatusBar text')
self.statusBar().reformat()
self.statusBar().setStyleSheet('border: 0; background-color: #FFF8DC;')
self.statusBar().setStyleSheet("QStatusBar::item {border: none;}")
self.statusBar().addPermanentWidget(VLine()) # <---
self.statusBar().addPermanentWidget(self.lbl1)
self.statusBar().addPermanentWidget(VLine()) # <---
self.statusBar().addPermanentWidget(self.lbl2)
self.statusBar().addPermanentWidget(VLine()) # <---
self.statusBar().addPermanentWidget(ed)
self.statusBar().addPermanentWidget(VLine()) # <---
self.lbl1.setText("Label: Hello")
self.lbl2.setText("Data : 15-09-2019")
ed.clicked.connect(lambda: self.statusBar().showMessage("Hello "))
if __name__ == '__main__':
app = QApplication(sys.argv)
window = MainWindow()
window.show()
sys.exit(app.exec_())

How can I show multiple pages in one window?

I'm currently creating a to-do application. I have a side menu (which is just QPushButtons in a vbox) and have a main window widget to show content. However, I need a way to show different content in the main widget based on what side menu button is pressed. I have tried to use QStackedLayout, but I don't like the way it closes the main window and switches to a new one. I've also tried to use QTabWidget, but the tabs are at the top. Is there a way to sub-class QTabWidget and create a custom QTabWidget with the tab buttons on the side? If not, is there a way to do this? The image above is what I have so far.
This is all my code:
from PyQt5 import QtCore, QtGui, QtWidgets, uic
from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import *
from datetime import date
import sys
months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November",
"December"]
stylesheet = """
QWidget{
background-color: white;
}
QWidget#sideMenuBackground{
background-color: #f7f7f7;
}
QVBoxLayout#sideMenuLayout{
background-color: grey;
}
QPushButton#sideMenuButton{
text-align: left;
border: none;
background-color: #f7f7f7;
max-width: 10em;
font: 16px;
padding: 6px;
}
QPushButton#sideMenuButton:hover{
font: 18px;
}
QLabel#today_label{
font: 25px;
max-width: 70px;
}
QLabel#todays_date_label{
font: 11px;
color: grey;
}
QPushButton#addTodoEventButton{
border: none;
max-width: 130px;
}
"""
class MainWindow(QtWidgets.QMainWindow):
def __init__(self):
super().__init__()
self.setWindowTitle("To-Do Application")
self.setGeometry(200, 200, 800, 500)
self.initUI()
def initUI(self):
self.nextWeekPage = QtWidgets.QLabel()
backgroundWidget = QtWidgets.QWidget()
backgroundWidget.setObjectName("sideMenuBackground")
backgroundWidget.setFixedWidth(150)
layout = QtWidgets.QHBoxLayout()
layout.addWidget(backgroundWidget)
sideMenuLayout = QtWidgets.QVBoxLayout()
sideMenuLayout.setObjectName("sideMenuLayout")
taskLayout = QtWidgets.QVBoxLayout()
backgroundWidget.setLayout(sideMenuLayout)
layout.addLayout(taskLayout)
self.setSideMenu(sideMenuLayout)
sideMenuLayout.addStretch(0)
self.setMainLayout(taskLayout)
taskLayout.addStretch(0)
mainWidget = QtWidgets.QWidget()
mainWidget.setLayout(layout)
self.setCentralWidget(mainWidget)
def setSideMenu(self, layout):
self.todayButton = QtWidgets.QPushButton(" Today")
self.nextWeekButton = QtWidgets.QPushButton("Next 7 Days")
self.calendarButton = QtWidgets.QPushButton("Calendar")
sideMenuButtons = [self.todayButton, self.nextWeekButton, self.calendarButton]
for button in sideMenuButtons:
button.setObjectName("sideMenuButton")
layout.addWidget(button)
sideMenuButtons[0].setIcon(QtGui.QIcon("today icon.png"))
sideMenuButtons[1].setIcon(QtGui.QIcon("week icon.png"))
sideMenuButtons[2].setIcon(QtGui.QIcon("calendar icon.png"))
sideMenuButtons[0].pressed.connect(self.todayButtonPress)
sideMenuButtons[1].pressed.connect(self.nextWeekButtonPress)
sideMenuButtons[2].pressed.connect(self.calendarButtonPress)
def setMainLayout(self, layout):
today_label_widget = QtWidgets.QWidget()
today_label_layout = QtWidgets.QHBoxLayout()
layout.addWidget(today_label_widget)
today_label_widget.setLayout(today_label_layout)
month = date.today().month
day = date.today().day
today = f"{months[month - 1]}{day}"
self.todays_date = QtWidgets.QLabel(today)
self.todays_date.setObjectName("todays_date_label")
self.today_label = QtWidgets.QLabel("Today")
self.today_label.setObjectName("today_label")
self.addTodoEventButton = QtWidgets.QPushButton()
self.addTodoEventButton.setObjectName("addTodoEventButton")
self.addTodoEventButton.setIcon(QtGui.QIcon("add event button.png"))
self.addTodoEventButton.setToolTip("Add To Do Event")
today_label_layout.addWidget(self.today_label)
today_label_layout.addWidget(self.todays_date)
today_label_layout.addWidget(self.addTodoEventButton)
self.labels = ["button1", "button2", "button3", "button4", "Button5"]
for today_events in self.labels:
label = QtWidgets.QLabel(today_events)
layout.addWidget(label)
def addTodoEvent(self):
pass
def todayButtonPress(self):
print("today button pressed")
def nextWeekButtonPress(self):
print("Next week button pressed")
def calendarButtonPress(self):
print("calendar button pressed")
def main():
app = QtWidgets.QApplication(sys.argv)
app.setStyleSheet(stylesheet)
window = MainWindow()
window.show()
app.exec_()
if __name__ == "__main__":
main()

Using a stacked layout shouldn't open a new window when used correctly. The snippet below outlines how the original code could be adapted to use a stacked layout to open different pages in the same window.
class MainWindow(QtWidgets.QMainWindow):
def initUI(self):
# same as before
self.taskLayout = QtWidgets.QStackedLayout()
self.setMainLayout(self.taskLayout)
# same as before
def setMainLayout(self, layout)
today = self.todayWidget()
next_week = self.nextWeekWidget()
calendar_widget = self.calendarWidget()
layout.addWidget(today)
layout.addWidget(next_week)
layout.addWidget(calendar_widget)
def todayWidget(self)
widget = QtWidgets.QWidget(self)
layout = QVBoxLayout(widget)
# setup layout for today's widget
return widget
def nextWeekWidget(self)
widget = QtWidgets.QWidget(self)
layout = QVBoxLayout(widget)
# setup layout for next week's widget
return widget
def calendarWidget(self)
widget = QtWidgets.QWidget(self)
layout = QVBoxLayout(widget)
# setup layout for calendar widget
return widget
def todayButtonPress(self):
self.taskLayout.setCurrentIndex(0)
def nextWeekButtonPress(self):
self.taskLayout.setCurrentIndex(1)
def calendarButtonPress(self):
self.taskLayout.setCurrentIndex(2)

Here is a solution using a custom QListWidget combined with a QStackedWidget.
QListWidget on the left and QStackedWidget on the right, then add a QWidget to it in turn.
When adding a QWidget on the right, there are two variants:
The list on the left is indexed according to the serial number. When adding a widget, the variable name with the serial number is indicated on the right, for example, widget_0, widget_1, widget_2, etc., so that it can be directly associated with the serial number QListWidget.
When an item is added to the list on the left side, the value of the corresponding widget variable is indicated on the right.
from random import randint
from PyQt5.QtCore import Qt, QSize
from PyQt5.QtGui import QIcon
from PyQt5.QtWidgets import (QWidget, QListWidget, QStackedWidget,
QHBoxLayout, QListWidgetItem, QLabel)
class LeftTabWidget(QWidget):
def __init__(self, *args, **kwargs):
super(LeftTabWidget, self).__init__(*args, **kwargs)
self.resize(800, 600)
# Left and right layout (one QListWidget on the left + QStackedWidget on the right)
layout = QHBoxLayout(self, spacing=0)
layout.setContentsMargins(0, 0, 0, 0)
# List on the left
self.listWidget = QListWidget(self)
layout.addWidget(self.listWidget)
# Cascading window on the right
self.stackedWidget = QStackedWidget(self)
layout.addWidget(self.stackedWidget)
self.initUi()
def initUi(self):
# Initialization interface
# Switch the sequence number in QStackedWidget by the current item change of QListWidget
self.listWidget.currentRowChanged.connect(
self.stackedWidget.setCurrentIndex)
# Remove the border
self.listWidget.setFrameShape(QListWidget.NoFrame)
# Hide scroll bar
self.listWidget.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
self.listWidget.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
# Here we use the general text with the icon mode (you can also use Icon mode, setViewMode directly)
for i in range(5):
item = QListWidgetItem(
QIcon('Ok.png'), str('Option %s' % i), self.listWidget)
# Set the default width and height of the item (only height is useful here)
item.setSizeHint(QSize(16777215, 60))
# Text centered
item.setTextAlignment(Qt.AlignCenter)
# Simulate 5 right-side pages (it won't loop with the top)
for i in range(5):
label = QLabel('This is the page %d' % i, self)
label.setAlignment(Qt.AlignCenter)
# Set the background color of the label (randomly here)
# Added a margin margin here (to easily distinguish between QStackedWidget and QLabel colors)
label.setStyleSheet('background: rgb(%d, %d, %d); margin: 50px;' % (
randint(0, 255), randint(0, 255), randint(0, 255)))
self.stackedWidget.addWidget(label)
# style sheet
Stylesheet = """
QListWidget, QListView, QTreeWidget, QTreeView {
outline: 0px;
}
QListWidget {
min-width: 120px;
max-width: 120px;
color: white;
background: black;
}
QListWidget::item:selected {
background: rgb(52, 52, 52);
border-left: 2px solid rgb(9, 187, 7);
}
HistoryPanel::item:hover {background: rgb(52, 52, 52);}
QStackedWidget {background: rgb(30, 30, 30);}
QLabel {color: white;}
"""
if __name__ == '__main__':
import sys
from PyQt5.QtWidgets import QApplication
app = QApplication(sys.argv)
app.setStyleSheet(Stylesheet)
w = LeftTabWidget()
w.show()
sys.exit(app.exec_())

Why i cannot see green rectangle in main window?

I can try to use Qt and QML from Python.
main_window.qml:
import QtQuick 2.10
Rectangle {
id: mainWindow
objectName: "mainWindow"
width: 1000
height: 100
x: 100
y: 100
color: "gray"
Rectangle {
id: red
objectName: "red"
width: 800
height: 50
x: 200
y: 200
color: "red"
}
}
rectangle.qml:
import QtQuick 2.10
Rectangle {
id: green
objectName: "green"
width: 800
height: 50
x: 200
y: 400
color: "green"
}
test.py:
import os
import sys
from PyQt5.QtCore import QUrl
from PyQt5.QtGui import QGuiApplication
from PyQt5.QtQml import QQmlComponent
from PyQt5.QtQuick import QQuickView
os.environ["QML_DISABLE_DISK_CACHE"] = "true"
class Graphic:
def __init__(self):
self.main_window = QQuickView()
self.main_window.setSource(QUrl.fromLocalFile("ui/main_window.qml"))
def load_screen(self):
component = QQmlComponent(self.main_window.engine())
component.loadUrl(QUrl.fromLocalFile("ui/rectangle.qml"))
item = component.create()
item.setParent(self.main_window.rootObject())
self.main_window.show()
if __name__ == '__main__':
app = QGuiApplication(sys.argv)
graphic = Graphic()
graphic.load_screen()
app.exec()
It's a simple example for my question.
I try dynamicly load and display screens in main window.
I see gray and red rectangle, but cannot see the green rectangle.
What's wrong?

According to the docs:
parent : QQuickItem *
This property holds the visual parent of the item.
Note: The concept of the visual parent differs from that of the
QObject parent. An item's visual parent may not necessarily be the
same as its object parent. See Concepts - Visual Parent in Qt Quick
for more details.
In other words, for an item to be visible, a visual parent must be established through setParentItem():
def load_screen(self):
component = QQmlComponent(self.main_window.engine())
component.loadUrl(QUrl.fromLocalFile("ui/rectangle.qml"))
item = component.create()
item.setParent(self.main_window.rootObject())
item.setParentItem(self.main_window.rootObject()) # <---
self.main_window.show()

Creating a custom widget in PyQT5

I would like to know how one can create a custom widget in pyqt. I've seen many different examples for C++, and a couple non descript examples for pyqt, but nothing that really explains how to do it and implement it. There is especially no examples that basically aren't just modified qt-designer output, and I'm writing my code from scratch so that's not very helpful.
So far, the best example I could find was basically just someone modifying qt-designer code and not really explaining what any of it was doing.
Could someone please show me an example of how to create a custom widget?
Edit:
I'm attempting to create a widget with an embedded QStackedWidget, and buttons on the bottom to cycle the pages.
I also planned on having a seperate widget for each page, but considering I can't actually accomplish step one, I figured I would cross that bridge when I get to it.

In the following it is shown how to implement a QStackedWidget with 2 buttons, the basic idea is to layout the design, for this we analyze that a QVBoxLayout must be placed to place the QStackedWidget and another layout, this second layout will be a QHBoxLayout to have the buttons. Then we connect the signals that handle the transition between pages. Also in this example I have created 3 types of widgets that will be placed on each page.
from PyQt5.QtWidgets import *
class Widget1(QWidget):
def __init__(self, parent=None):
QWidget.__init__(self, parent=parent)
lay = QVBoxLayout(self)
for i in range(4):
lay.addWidget(QPushButton("{}".format(i)))
class Widget2(QWidget):
def __init__(self, parent=None):
QWidget.__init__(self, parent=parent)
lay = QVBoxLayout(self)
for i in range(4):
lay.addWidget(QLineEdit("{}".format(i)))
class Widget3(QWidget):
def __init__(self, parent=None):
QWidget.__init__(self, parent=parent)
lay = QVBoxLayout(self)
for i in range(4):
lay.addWidget(QRadioButton("{}".format(i)))
class stackedExample(QWidget):
def __init__(self, parent=None):
QWidget.__init__(self, parent=parent)
lay = QVBoxLayout(self)
self.Stack = QStackedWidget()
self.Stack.addWidget(Widget1())
self.Stack.addWidget(Widget2())
self.Stack.addWidget(Widget3())
btnNext = QPushButton("Next")
btnNext.clicked.connect(self.onNext)
btnPrevious = QPushButton("Previous")
btnPrevious.clicked.connect(self.onPrevious)
btnLayout = QHBoxLayout()
btnLayout.addWidget(btnPrevious)
btnLayout.addWidget(btnNext)
lay.addWidget(self.Stack)
lay.addLayout(btnLayout)
def onNext(self):
self.Stack.setCurrentIndex((self.Stack.currentIndex()+1) % 3)
def onPrevious(self):
self.Stack.setCurrentIndex((self.Stack.currentIndex()-1) % 3)
if __name__ == '__main__':
import sys
app = QApplication(sys.argv)
w = stackedExample()
w.show()
sys.exit(app.exec_())

Here are some nice advises, examples and approaches.
I think you can divide a custom Widget or any Custom "thing" you want in three ways.
Behavior: When you override its default methods with the behavior you want.
Layout: All the qt objects, be Items, or Widgets you add inside the layout will follow it's position rules and its policies.
StyleSheet: In case of Widget objects where you set the style of the Widget let's say setting its "CSS", just to be concise. Here are some references and examples.
Note: In case of non Widget objects you will not be able to set a StyleSheet so you will have to override some paint methods, create your own Painters and so on.
Here are some random examples with some comments along approaching the 3 topics I mentioned above:
import random
import sys
from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import QApplication
from PyQt5.QtWidgets import QDialog
from PyQt5.QtWidgets import QHBoxLayout
from PyQt5.QtWidgets import QPushButton
from PyQt5.QtWidgets import QVBoxLayout
from PyQt5.QtWidgets import QWidget
class MovableWidget(QWidget):
def __init__(self):
super(MovableWidget, self).__init__()
#remove the frame
self.setWindowFlags(Qt.CustomizeWindowHint)
self.pressing = False
# overriding the three next methods is a way to customize your Widgets
# not just in terms of appearance but also behavioral.
def mousePressEvent(self, QMouseEvent):
#the pos of the widget when you first pressed it.
self.start = QMouseEvent.pos()
#to make sure you are holding mouse button down
self.pressing = True
def mouseMoveEvent(self, QMouseEvent):
# You can Verify if it's also the left button and some other things
# you need.
if self.pressing : #and QMouseEvent.type() == Qt.LeftButton
self.end = QMouseEvent.pos()
self.delta = self.mapToGlobal(self.end-self.start)
self.move(self.delta)
self.end = self.start
def mouseReleaseEvent(self, QMouseEvent):
self.pressing = False
# inherits from QDialog and from MovableWidget so we can have its properties.
class CustomDialog(QDialog, MovableWidget):
def __init__(self):
super(CustomDialog, self).__init__()
#Make the Dialog transparent
self.setAttribute(Qt.WA_TranslucentBackground)
# the widget will dispose itself according to the layout rules he's
# inserted into.
self.inner_widget = QWidget()
self.inner_widget.setFixedSize(300,300)
self.inner_layout = QHBoxLayout()
self.inner_widget.setLayout(self.inner_layout)
self.btn_change_color = QPushButton("Roll Color")
self.btn_change_color.setStyleSheet("""
background-color: green;
""")
# will connect to a function to be executed when the button is clicked.
self.btn_change_color.clicked.connect(self.change_color)
self.inner_layout.addWidget(self.btn_change_color)
# Choose among many layouts according to your needs, QVBoxLayout,
# QHBoxLayout, QStackedLayout, ... you can set its orientation
# you can set its policies, spacing, margins. That's one of the main
# concepts you have to learn to customize your Widget in the way
# you want.
self.layout = QVBoxLayout()
# stylesheet have basically CSS syntax can call it QSS.
# it can be used only on objects that come from Widgets
# Also one of the main things to learn about customizing Widgets.
# Note: The stylesheet you set in the "father" will be applied to its
# children. Unless you tell it to be applied only to it and/or specify
# each children's style.
# The point I used inside the StyleSheet before the QDialog
# e.g .QDialog and .QWidget says it'll be applied only to that
# instance.
self.setStyleSheet("""
.QDialog{
border-radius: 10px;
}
""")
self.inner_widget.setStyleSheet("""
.QWidget{
background-color: red;
}
""")
self.layout.addWidget(self.inner_widget)
self.setLayout(self.layout)
def change_color(self):
red = random.choice(range(0,256))
green = random.choice(range(0,256))
blue = random.choice(range(0,256))
self.inner_widget.setStyleSheet(
"""
background-color: rgb({},{},{});
""".format(red,green,blue)
)
# since MovableWidget inherits from QWidget it also have QWidget properties.
class ABitMoreCustomizedWidget(MovableWidget):
def __init__(self):
super(ABitMoreCustomizedWidget, self).__init__()
self.layout = QHBoxLayout()
self.setLayout(self.layout)
self.custom_button1 = CustomButton("Button 1")
self.custom_button1.clicked.connect(self.btn_1_pressed)
self.custom_button2 = CustomButton("Button 2")
self.custom_button2.clicked.connect(self.btn_2_pressed)
self.layout.addWidget(self.custom_button1)
self.layout.addWidget(self.custom_button2)
def btn_1_pressed(self):
self.custom_button1.hide()
self.custom_button2.show()
def btn_2_pressed(self):
self.custom_button2.hide()
self.custom_button1.show()
class CustomButton(QPushButton):
# it could receive args and keys** so all the QPushButton initializer
# would work for here too.
def __init__(self, txt):
super(CustomButton, self).__init__()
self.setText(txt)
self.setStyleSheet("""
QPushButton{
background-color: black;
border-radius: 5px;
color: white;
}
QPushButton::pressed{
background-color: blue;
}
QPushButton::released{
background-color: gray;
}
""")
if __name__ == "__main__":
app = QApplication(sys.argv)
custom_dialog = CustomDialog()
custom_widget = ABitMoreCustomizedWidget()
custom_dialog.show()
custom_widget.show()
sys.exit(app.exec_())
Tips:
You are also able to make use of masks in your widget changing it's format in "crazy" ways. For example if you need a hollow ringed widget you can have a image with this format and some transparency, create a QPixMap from that and apply it as a mask to your widget. Not a trivial work but kind of cool.
Since I showed you examples with no "TopBar" with no Frame you can also have a look in this other question where I show how to create your own top bar, move around and resize concepts.