How to flip RadioButton? - qt

Question

Is it possible to flip a RadioButton? By default the circle is aligned left and the text is aligned right. I'd like to position the text to the left and circle to the right. With LayoutMirroring.childrenInherit: true I position text to the left, but the circle is still on the left.
Column {
id: column1
x: -265
y: 219
width: 104
height: 45
spacing: 5
LayoutMirroring.enabled: true
LayoutMirroring.childrenInherit: true
ExclusiveGroup { id: diamTypes }
RadioButton { text: "one"; exclusiveGroup: diamTypes }
RadioButton { text: "two"; exclusiveGroup: diamTypes }
}

Answer 1

Add a Text item (with the desired name) within the RadioButton item and give a relative x and y position to it. Leave the text property of the RadioButton blank.
RadioButton {
id: radioButtonID
x: 319 // Button position
y: 46
Text {
x: -60 // Relative text position to the radio button
y: 3
text: "Radio Button"
font.pointSize: 8
color: "black"
}
}

Answer 2

Here's how to do it using widgets:
Inherit from QRadioButton, add a new QLabel for text, make the original QRadioButton::text empty, and adjust the padding. Like this:
QFont myFont;
QFontMetrics fm(myFont);
int indicatorPadding = WINDOW_WIDTH - 25;
this->setStyleSheet(QString("QRadioButton { "
"text-align: left; "
"padding-left: " + QString::number(indicatorPadding ) + "px; "
"} ")
);
int paddingLeft = indicatorPadding - RADIO_BTN_WIDTH - fm.width(radioText->text());
radioText->setStyleSheet("padding-top: 7px; padding-left: " + QString::number(paddingLeft) + ";");
Here is my full class for RadioButtons for RTL languages (it also aligns text accordingly):
my_radiobutton.h:
#ifndef MYRADIOBUTTON_H
#define MYRADIOBUTTON_H
#include <QRadioButton>
#include <QEvent>
#include <QLabel>
#include "constants.h"
class MyRadioButton : public QRadioButton
{
private:
QLabel* radioText = NULL;
public:
explicit MyRadioButton(QWidget *parent=0);
explicit MyRadioButton(const QString &text, QWidget *parent=0);
void setText(const QString &text);
QString text() const;
protected:
void alignText();
void changeEvent(QEvent * event);
};
#endif // MYRADIOBUTTON_H
my_radiobutton.cpp:
#include "my_radiobutton.h"
bool isRTL(); //returns true if RTL language, and false otherwise
MyRadioButton::MyRadioButton(QWidget *parent)
: QRadioButton(parent)
{
if(isRTL()){
radioText = new QLabel(this);
}
}
MyRadioButton::MyRadioButton(const QString &text, QWidget *parent)
: QRadioButton(text,parent)
{
if(isRTL()){
radioText = new QLabel(this);
}
}
void MyRadioButton::setText(const QString &text)
{
if(isRTL()){
QRadioButton::setText("");
if(radioText){
radioText->setText(text);
}
}
else{
QRadioButton::setText(text);
}
alignText();
}
QString MyRadioButton::text() const
{
if(isRTL() && radioText){
return radioText->text();
}
else{
return QRadioButton::text();
}
}
void MyRadioButton::alignText()
{
if(isRTL() && radioText){
QFont myFont;
QFontMetrics fm(myFont);
int indicatorPadding = WINDOW_WIDTH - 25;
this->setStyleSheet(QString("QRadioButton { "
"text-align: left; "
"padding-left: " + QString::number(indicatorPadding ) + "px; "
"} ")
);
int paddingLeft = indicatorPadding - RADIO_BTN_WIDTH - fm.width(radioText->text());
radioText->setStyleSheet("padding-top: " + QString::number(CENTER_OF_LINE) + "px; padding-left: " + QString::number(paddingLeft) + ";");
}
else{
this->setStyleSheet(QString("QRadioButton { "
"text-align: left; "
"padding-left: " TEXT_PADDING "px; "
"} ")
);
}
}
void MyRadioButton::changeEvent(QEvent * event)
{
if (event->type() == QEvent::LanguageChange){
alignText();
}
QWidget::changeEvent(event);
}
constants.h:
#define WINDOW_WIDTH 220
#define RADIO_BTN_WIDTH 10
#define CENTER_OF_LINE ((LINE_HEIGHT/2) - (FONT_SIZE/2)) // ==7
#define TEXT_PADDING STRINGIFY(10)
Result:

Answer 3

Go to the design view and set direction to "left to right".

Answer 4

RadioButtonStyle can also be used for the purpose. The alignment should be set up somehow:
RadioButton {
text: "bla-bla";
exclusiveGroup: diamTypes
style: RadioButtonStyle {
label: Label {
text: control.text
font.pointSize: 14
anchors.margins: 0
}
indicator: Rectangle {
implicitWidth: 16
implicitHeight: 16
radius: 9
border.color: control.activeFocus ? "darkblue" : "gray"
border.width: 1
Rectangle {
anchors.fill: parent
visible: control.checked
color: "#555"
radius: 9
anchors.margins: 4
}
}
}
}

Answer 5

you can do it easy:
RadioButton {
id: offlineMapParentBox
text: qsTr("radio button")
anchors.left: parent.left
LayoutMirroring.enabled: true
}
or if you work on left to right and right to left multilanguage app you can do it like below:
RadioButton {
id: offlineMapParentBox
text: qsTr("Offline Map")
anchors.left: parent.left
LayoutMirroring.enabled: isLeftToRight ? false : true
}
thanks