如何翻转单选按钮？

Question

可以翻转RadioButton吗？默认情况下，圆圈左对齐，文本右对齐。我想把文字放在左边，把圆圈放在右边。使用 LayoutMirroring.childrenInherit: true 我将文本放在左侧，但圆圈仍在左侧。

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

在 RadioButton 项目中添加一个 Text 项目（使用所需的名称），并为其指定一个相对的 x 和 y 位置。将 RadioButton 的 text 属性留空。

  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

RadioButtonStyle也可以用于此目的。应该以某种方式设置对齐方式：

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 3

使用小部件的方法如下：

继承QRadioButton，为文字添加新的QLabel，将原来的QRadioButton::text留空，调整padding。像这样：

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) + ";");

这是我针对 RTL 语言的单选按钮的完整 class（它还相应地对齐文本）：

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)

结果：

Answer 4

转到设计视图并将方向设置为 "left to right"。

Answer 5

你可以轻松做到：

  RadioButton {
            id: offlineMapParentBox
            text: qsTr("radio button")
            anchors.left: parent.left
            LayoutMirroring.enabled: true
        }

或者，如果您在从左到右和从右到左的多语言应用程序上工作，您可以按如下方式进行操作：

RadioButton {
            id: offlineMapParentBox
            text: qsTr("Offline Map")
            anchors.left: parent.left
            LayoutMirroring.enabled: isLeftToRight ? false : true
         }

谢谢

如何翻转单选按钮？

How to flip RadioButton?

qt

qml

qtquick2