I have a toplevel widget with a layout set and 2 other widgets added to that layout, when I color them all I only see the toplevel widget color but Id like to see the children widgets on top. This is what I have attempted but it just displays a blue QWidget, I am expecting red and green widgets one on top of the other
def set_color(widget, color):
p = widget.palette()
p.setColor(widget.backgroundRole(), color)
widget.setPalette(p)
from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import QApplication, QWidget,QVBoxLayout
app = QApplication([])
win = QWidget()
win.show()
win.resize(1920,1080)
vlayout = QVBoxLayout()
win.setLayout(vlayout)
set_color(win, Qt.blue)
mod_group = QWidget()
mod_layout = QHBoxLayout()
mod_group.setLayout(mod_layout)
vlayout.addWidget(mod_group)
set_color(mod_group, Qt.red)
mod_group.show()
audio_group = QWidget()
audio_layout = QHBoxLayout()
vlayout.addWidget(audio_group)
audio_group.setLayout(audio_layout)
set_color(audio_group, Qt.green)
audio_group.show()
The widgets are visible but the background color you use is the same as the parent widget, so that they are applied correctly you must enable the autoFillBackground property:
mod_group.setAutoFillBackground(True)
audio_group.setAutoFillBackground(True)
Related
I have a QDockWidget and I have put some widgets on it's titlebar like in this MRE:
from PySide6.QtCore import Qt
from PySide6.QtWidgets import (QWidget, QCheckBox, QMainWindow, QLabel, QDockWidget, QApplication, QHBoxLayout,
QSizePolicy)
class MainWindow(QMainWindow):
def __init__(self):
QMainWindow.__init__(self)
central_widget = QLabel("Window stuff!")
self.setCentralWidget(central_widget)
self.dock = QDockWidget()
self.docker_layout = QHBoxLayout()
self.docker_layout.setContentsMargins(0, 0, 0, 0)
self.docker_layout.setAlignment(Qt.AlignLeft)
container = QWidget()
container.setLayout(self.docker_layout)
label = QLabel("Docker name")
label.setSizePolicy(QSizePolicy.Minimum, QSizePolicy.Minimum)
self.dock.setTitleBarWidget(container)
# Widgets creation:
self.docker_layout.addWidget(label)
self.check_1 = QCheckBox("Check 1")
self.docker_layout.addWidget(self.check_1)
self.check_2 = QCheckBox("Check 2", checked=True)
self.docker_layout.addWidget(self.check_2)
self.check_3 = QCheckBox("Check 3", checked=True)
self.docker_layout.addWidget(self.check_3)
self.check_4 = QCheckBox("You cant hide me haha!", checked=True)
self.docker_layout.addWidget(self.check_4)
self.dock.setTitleBarWidget(container)
self.addDockWidget(Qt.RightDockWidgetArea, self.dock)
self.dock_content = QLabel("Dock stuff!")
self.dock.setWidget(self.dock_content)
self.show()
if __name__ == "__main__":
app = QApplication([])
window = MainWindow()
app.exec()
But as you can see in the following giph, the dock is not collapsable due to the widgets in the sidebar. How can I allow the widgets to get out of screen and resize the dock freely?
That depends by the fact that the dock widget sets the minimum width based on that of the title bar widget: if no explicit minimum width is set, then the width returned by minimumSizeHint() is used.
A possible solution is to subclass the layout and reimplement both minimumWidth() and setGeometry().
The first ensures that the title bar can be resized to a smaller width, while the second lays outs the items by ignoring the given geometry at all.
The result is, obviously, that part of the title bar will be hidden.
class IgnoreWidthLayout(QHBoxLayout):
def minimumSize(self):
return QSize(80, super().minimumSize().height())
def setGeometry(self, geometry):
geometry.setWidth(super().minimumSize().width())
super().setGeometry(geometry)
class MainWindow(QMainWindow):
def __init__(self):
# ...
self.docker_layout = IgnoreWidthLayout()
Note that:
setting the Minimum size policy on the label is not required in this situation (and you probably should need Maximum instead, consider that QSizePolicy flags have names that are unintuitive at first);
you're calling setTitleBarWidget twice;
setting the alignment on the layout has usually little use (and is almost useless in this specific case): it doesn't tell the alignment of the child items, it specifies the alignment that layout manager will have once it's set on a parent widget or added to another layout;
I have set up an image button with some text, but the image does not align with the text due to some extra margins. How can I get rid of these margins? I have tried setting setContentsMargins(0,0,0,0) and setSpacing(0) on various components but it doesn't seem to affect the correct margins.
Here is a demo:
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
class ImageButton(QWidget):
def __init__(self, img_location):
QWidget.__init__(self)
self.img_location = img_location
self.button = QToolButton(self)
self.button.clicked.connect(self.handleButton)
self.button.setToolButtonStyle(Qt.ToolButtonTextUnderIcon)
self.button.setIcon(QIcon(img_location))
self.button.setIconSize(QSize(300,400))
layout = QVBoxLayout(self)
layout.addWidget(self.button)
def handleButton(self):
print(self.img_location)
app = QApplication([])
window = QMainWindow()
window.resize(800,600)
label_title = QLabel("bob asdfjak f ajksf asljf ajdslf aldskj ksf kslfhadjks lfhiu sofhjaklfsiuod fahklfhadisufaksufhdsuifhosa fasdf afsda")
label_title.setStyleSheet('background-color: yellow')
label_title.setAlignment(Qt.AlignCenter)
label_title.adjustSize()
label_title.setWordWrap(True)
imgbtn = ImageButton("a.png")
imgbtn.setStyleSheet('background-color: green')
layout_box = QVBoxLayout()
layout_box.setContentsMargins(0,0,0,0)
layout_box.setSpacing(0)
layout_box.addWidget(imgbtn, 0, Qt.AlignTop)
layout_box.addWidget(label_title, 0, Qt.AlignTop)
layout_box.setAlignment(Qt.AlignCenter)
layout_box.setSpacing(0)
content = QWidget()
content.setStyleSheet('background-color: blue')
content.setFixedWidth(300)
content.setFixedHeight(400)
content.setLayout(layout_box)
window.setCentralWidget(content)
window.show()
app.exec_()
The Yellow region marks the text label, the Green region marks the imagebutton, and the Blue region marks the space I'm trying to get rid of. See how the yellow region expands to the size of the blue, with the end result that the text doesn't align to the imagebutton.
How can I get rid of this blue region?
That margin is that of the QVBoxLayout that you use to place the QToolButton inside ImageButton, so the solution is to set it to 0 that margin:
# ...
class ImageButton(QWidget):
def __init__(self, img_location):
super().__init__(self)
# ...
layout = QVBoxLayout(self)
layout.addWidget(self.button)
layout.setContentsMargins(0, 0, 0, 0)
# ...
I have set up an image button with some text, but the image does not align with the text due to some extra margins. How can I get rid of these margins? I have tried setting setContentsMargins(0,0,0,0) and setSpacing(0) on various components but it doesn't seem to affect the correct margins.
Here is a demo:
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
class ImageButton(QWidget):
def __init__(self, img_location):
QWidget.__init__(self)
self.img_location = img_location
self.button = QToolButton(self)
self.button.clicked.connect(self.handleButton)
self.button.setToolButtonStyle(Qt.ToolButtonTextUnderIcon)
self.button.setIcon(QIcon(img_location))
self.button.setIconSize(QSize(300,400))
layout = QVBoxLayout(self)
layout.addWidget(self.button)
def handleButton(self):
print(self.img_location)
app = QApplication([])
window = QMainWindow()
window.resize(800,600)
label_title = QLabel("bob asdfjak f ajksf asljf ajdslf aldskj ksf kslfhadjks lfhiu sofhjaklfsiuod fahklfhadisufaksufhdsuifhosa fasdf afsda")
label_title.setStyleSheet('background-color: yellow')
label_title.setAlignment(Qt.AlignCenter)
label_title.adjustSize()
label_title.setWordWrap(True)
imgbtn = ImageButton("a.png")
imgbtn.setStyleSheet('background-color: green')
layout_box = QVBoxLayout()
layout_box.setContentsMargins(0,0,0,0)
layout_box.setSpacing(0)
layout_box.addWidget(imgbtn, 0, Qt.AlignTop)
layout_box.addWidget(label_title, 0, Qt.AlignTop)
layout_box.setAlignment(Qt.AlignCenter)
layout_box.setSpacing(0)
content = QWidget()
content.setStyleSheet('background-color: blue')
content.setFixedWidth(300)
content.setFixedHeight(400)
content.setLayout(layout_box)
window.setCentralWidget(content)
window.show()
app.exec_()
The Yellow region marks the text label, the Green region marks the imagebutton, and the Blue region marks the space I'm trying to get rid of. See how the yellow region expands to the size of the blue, with the end result that the text doesn't align to the imagebutton.
How can I get rid of this blue region?
That margin is that of the QVBoxLayout that you use to place the QToolButton inside ImageButton, so the solution is to set it to 0 that margin:
# ...
class ImageButton(QWidget):
def __init__(self, img_location):
super().__init__(self)
# ...
layout = QVBoxLayout(self)
layout.addWidget(self.button)
layout.setContentsMargins(0, 0, 0, 0)
# ...
I'm trying to setup a layout similar to this question. Create Qt layout with fixed height. I'm trying to use the solution posted there but I cant seem to recreate it in python. How do I create a widget with a horizontal box layout and set the dimensions of the new widget? When I tried recreating the code in python my widget ended up as a layout instead of a widget. Below is the code I'm trying to rewrite in python, thanks in advance:
// first create the four widgets at the top left,
// and use QWidget::setFixedWidth() on each of them.
// then set up the top widget (composed of the four smaller widgets):
QWidget *topWidget = new QWidget;
QHBoxLayout *topWidgetLayout = new QHBoxLayout(topWidget);
topWidgetLayout->addWidget(widget1);
topWidgetLayout->addWidget(widget2);
topWidgetLayout->addWidget(widget3);
topWidgetLayout->addWidget(widget4);
topWidgetLayout->addStretch(1); // add the stretch
topWidget->setFixedHeight(50);
// now put the bottom (centered) widget into its own QHBoxLayout
QHBoxLayout *hLayout = new QHBoxLayout;
hLayout->addStretch(1);
hLayout->addWidget(bottomWidget);
hLayout->addStretch(1);
bottomWidget->setFixedSize(QSize(50, 50));
// now use a QVBoxLayout to lay everything out
QVBoxLayout *mainLayout = new QVBoxLayout;
mainLayout->addWidget(topWidget);
mainLayout->addStretch(1);
mainLayout->addLayout(hLayout);
mainLayout->addStretch(1);
The translation of C++ to Python does not have so much science since you only have to understand the logic:
from PyQt5.QtCore import QSize
from PyQt5.QtWidgets import QApplication, QComboBox, QHBoxLayout, QLineEdit, QPushButton, QSpinBox, QToolButton, QVBoxLayout, QWidget
class Widget(QWidget):
def __init__(self, parent=None):
super(Widget, self).__init__(parent)
widget1 = QPushButton("widget1")
widget2 = QSpinBox()
widget3 = QComboBox()
widget4 = QLineEdit()
bottomWidget = QToolButton(text="botton")
# first create the four widgets at the top left,
# and use QWidget::setFixedWidth() on each of them.
# then set up the top widget (composed of the four smaller widgets):
topWidget = QWidget()
topWidgetLayout = QHBoxLayout(topWidget)
topWidgetLayout.addWidget(widget1)
topWidgetLayout.addWidget(widget2)
topWidgetLayout.addWidget(widget3)
topWidgetLayout.addWidget(widget4)
topWidgetLayout.addStretch(1)
topWidget.setFixedHeight(50)
# now put the bottom (centered) widget into its own QHBoxLayout
hLayout = QHBoxLayout()
hLayout.addStretch(1)
hLayout.addWidget(bottomWidget)
hLayout.addStretch(1)
bottomWidget.setFixedSize(QSize(50, 50))
# now use a QVBoxLayout to lay everything out
mainLayout = QVBoxLayout()
mainLayout.addWidget(topWidget)
mainLayout.addStretch(1)
mainLayout.addLayout(hLayout)
mainLayout.addStretch(1)
self.setLayout(mainLayout)
self.resize(640, 480)
if __name__ == "__main__":
import sys
app = QApplication(sys.argv)
w = Widget()
w.show()
sys.exit(app.exec_())
The code below creates a dialog window with a QSplitter.
The left and right side of splitter is assigned a dark-colored QWidget.
Each QWidget layout's spacing was set to 0 (zero) (so there should be no margin).
To each of these 0-spacing layouts there was a light colored QLabel added.
I want QLabel to fill an entire QWidget with no spacing or margin. So QLabel would expand and to extend from edge to edge. Ideally we would not see the dark color of the QWidget. How could we modify the code so the QLabel extends from edge to edge inside of QWidget?
from PyQt5.QtCore import *
from PyQt5.QtGui import *
from PyQt5.QtWidgets import *
app = QApplication([])
window = QDialog()
window.setLayout(QVBoxLayout())
window.resize(400, 250)
splitter = QSplitter(Qt.Horizontal)
window.layout().addWidget(splitter)
for side in ['left', 'right']:
widget = QWidget()
widget.setStyleSheet("background-color:gray;")
widget_layout = QVBoxLayout()
widget_layout.setSpacing(0)
widget.setLayout(widget_layout)
label = QLabel('%s side QLabel' % side.capitalize())
label.setAlignment(Qt.AlignCenter)
label.setStyleSheet("background-color:lightgray;")
widget.layout().addWidget(label)
splitter.addWidget(widget)
window.show()
sys.exit(app.exec_())
You must set the layout margins to 0:
widget_layout.setContentsMargins(0, 0, 0, 0)
Code:
app = QApplication(sys.argv)
window = QDialog()
window.setLayout(QVBoxLayout())
window.resize(400, 250)
splitter = QSplitter(Qt.Horizontal)
window.layout().addWidget(splitter)
for side in ['left', 'right']:
widget = QWidget()
widget.setStyleSheet("background-color:gray;")
widget_layout = QVBoxLayout()
widget_layout.setContentsMargins(0, 0, 0, 0) # this line
widget_layout.setSpacing(0)
widget.setLayout(widget_layout)
label = QLabel('%s side QLabel' % side.capitalize())
label.setAlignment(Qt.AlignCenter)
label.setStyleSheet("background-color:lightgray;")
label.setContentsMargins(0, 0, 0, 0)
widget.layout().addWidget(label)
splitter.addWidget(widget)
window.show()
sys.exit(app.exec_())
Screenshot:
Note: setSpacing() is unnecessary in this case since this indicates the space between widgets inside a layout, but in this case only the QLabel is only in the layout.
You can also use:
splitter->setHandleWidth(1);