0

Is there a way to style QRadioButton labels? specifically I want to movethe label to the top, from this:

enter image description here

to this:

enter image description here

The latter having been done in tkinter.

eyllanesc
  • 235,170
  • 19
  • 170
  • 241
Libra
  • 2,544
  • 1
  • 8
  • 24

1 Answers1

1

you can achieve this by using QVBoxLayout and QLabel within a QHBoxLayout.

from PyQt5.QtWidgets import (
    QLabel, QRadioButton, QVBoxLayout, QHBoxLayout,
    QApplication, QWidget
)
import sys

class Window(QWidget):
    def __init__(self):
        QWidget.__init__(self)
        self.layout = QHBoxLayout()
        self.setLayout(self.layout)

        self.vlayout1 = QVBoxLayout()
        self.label1 = QLabel("HW")
        self.radiobutton1 = QRadioButton()
        self.radiobutton1.setChecked(True)
        self.radiobutton1.toggled.connect(self.onClicked)
        self.vlayout1.addWidget(self.label1)
        self.vlayout1.addWidget(self.radiobutton1)
        self.layout.addLayout(self.vlayout1)

        self.vlayout2 = QVBoxLayout()
        self.label2 = QLabel("SW")
        self.radiobutton2 = QRadioButton()
        self.radiobutton2.toggled.connect(self.onClicked)
        self.vlayout2.addWidget(self.label2)
        self.vlayout2.addWidget(self.radiobutton2)
        self.layout.addLayout(self.vlayout2)

    def onClicked(self):
        radioButton = self.sender()
        if radioButton.isChecked():
            print("Radio button clicked")


if __name__ == '__main__':
    app = QApplication(sys.argv)
    screen = Window()
    screen.show()
    sys.exit(app.exec_())

enter image description here

Eliakin Costa
  • 930
  • 6
  • 16
  • Forgive me for being picky but I originally didn't go with this because even though there is no label attached to the radio buttons, you can see that they still allocate a margin for it to be there, causing everything to be off-center. Completely re-positioning this margin could fix that but also a styling fix to eliminate it could as well. IIRC a negative right margin didn't work for this. – Libra Nov 21 '19 at 19:24
  • It's okay, @Laif. I would consider using [addStretch](https://doc.qt.io/archives/qt-4.8/qboxlayout.html#addStretch) and/or [addSpacerItem](https://doc.qt.io/archives/qt-4.8/qboxlayout.html#addSpacerItem). – Eliakin Costa Nov 21 '19 at 19:31
  • How would those help? – Libra Nov 21 '19 at 20:02
  • @Laif Using `addStretch` will push the radio-button up against the label. To centre the widgets, do `layout.addWidget(widget, 0, Qt.AlignHCenter)`. The gap between the label and the button can be adjusted with `layout.setSpacing(num)`. – ekhumoro Nov 21 '19 at 20:47
  • I am talking about the space to the _right_ of the actual button. It causes the indicator to stick out of the left side of the label. The distance between the label and the indicator is fine. – Libra Nov 21 '19 at 20:49
  • 2
    @Laif Give the button a fixed width, so it doesn't expand horizontally: `button.setFixedWidth(button.sizeHint().height())`. – ekhumoro Nov 21 '19 at 20:58
  • @ekhumoro This causes strange clipping issues as well as making the container extra wide. – Libra Nov 21 '19 at 21:05
  • 2
    @Laif Works fine for me. When I make the suggested changes to the example code shown above, it looks exactly like the second image shown in your question. – ekhumoro Nov 21 '19 at 21:12
  • Thanks for providing additional information, @ekhumoro. :) – Eliakin Costa Nov 22 '19 at 00:08