QCheckbox/QRadioButton line wrap Qt4.6.0

Question

I'm trying to have a multi-line checkbox/radiobutton with Qt using standard QCheckbox/QRadioButton.

I didn't find the direct solution since QRadioButton{wrap:true;} has no effect. The only thing possible would be to access to the QRadioButton->label->setLineWrap(true) but

1. I'd like to do that from the designer
2. not having to rewrite a widget

Any idea beside putting a QRadioButton and a QLabel next to each others?

Thx, Boris.

Answer 1

That indeed is really annoying and cannot be solved without reimplementation: the label uses Qt::PlainText if I'm not mistaken. In our projects, the UI team solved this with two approaches.

Using the QRadioButton button as a title

Rewrite the QRadioButton text in such a fashion that it has only a brief description of the option. Put a QLabel underneath it and add a longer description. We use a smaller font and a little indentation to make it look neat. This is used frequently in Mac OS X, for example.

Removing the text from the radio button

Relayout the UI so that each radio button is put on the left of a QLabel. Add the whole text to the QLabel and set the label as the radio buttons' buddy. This is the least functional approach, because clicking the label does not check the radio button. Also, alignment is not very good.

Answer 2

The only way I know (but it's not "layoutable") is putting \n sign into a string.

Answer 3

I succeeded adding a layout and a label as a child for the radio button, and changing the vertical size policy to Preferred (instead of Fixed).

Unfortunately this didn't automatically make it react to the mouse hovers and clicks like the native label, but watch a hack: I setStyleSheet("border:none") for the radio button and it started working. Maybe that's some feature happening behind the scenes; I'd love to have some certainty.

And the indicator can be aligned using "QRadioButton::indicator{subcontrol-position:top left}" <- http://doc.trolltech.com/qq/qq20-qss.html

Answer 4

The problem

There unfortunately is no short and simple solution for this. There's a Qt feature request about this (see QTBUG-5370), but it's pending for 13 (!) years now, so it probably will never be implemented.

So we have to implement this on our own. The clean way is to handle the resizeEvent within a custom QRadioButton subclass in order to perform the necessary line wrapping there. In addition to that, you must also use setSizePolicy and override the minimumSizeHint of the radio button.

The complete implementation of a LineWrappedRadioButton is given below.

LineWrappedRadioButton.h

#include <QRadioButton>

class LineWrappedRadioButton : public QRadioButton {
    Q_OBJECT
private:
    void wrapLines(int width);
protected:
    virtual void resizeEvent(QResizeEvent *event);
public:
    LineWrappedRadioButton(QWidget *parent = nullptr) : LineWrappedRadioButton(QString(), parent) { }
    LineWrappedRadioButton(const QString &text, QWidget *parent = nullptr);
    virtual QSize minimumSizeHint() const { return QSize(QRadioButton().minimumSizeHint().width(), sizeHint().height()); }
};

LineWrappedRadioButton.cpp

#include "LineWrappedRadioButton.h"
#include <QRadioButton>
#include <QResizeEvent>
#include <QStyle>

void LineWrappedRadioButton::wrapLines(int width) {
    QString word, line, result;
    for (QChar c : text().replace('\n', ' ') + ' ') {
        word += c;
        if (c.isSpace()) {
            if (!line.isEmpty() && fontMetrics().width(line + word.trimmed()) > width) {
                result += line.trimmed() + '\n';
                line = word;
            } else {
                line += word;
            }
            word.clear();
        }
    }
    result += line.trimmed();
    setText(result.trimmed());
}

void LineWrappedRadioButton::resizeEvent(QResizeEvent *event) {
    int controlElementWidth = sizeHint().width() - style()->itemTextRect(fontMetrics(), QRect(), Qt::TextShowMnemonic, false, text()).width();
    wrapLines(event->size().width() - controlElementWidth);
    QRadioButton::resizeEvent(event);
}

LineWrappedRadioButton::LineWrappedRadioButton(const QString &text, QWidget *parent) : QRadioButton(text, parent) {
    QSizePolicy policy = sizePolicy();
    policy.setHorizontalPolicy(QSizePolicy::Preferred);
    setSizePolicy(policy);
    updateGeometry();
}

Use it like this

int main(int argc, char **argv) {
    QApplication app(argc, argv);
    LineWrappedRadioButton button("Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.");
    button.show();
    return app.exec();
}

This will produce the following result:

Answer 5

My solution:

#ifndef CHECKBOX_H
#define CHECKBOX_H

#include <QCheckBox>

#include <QHBoxLayout>
#include <QLabel>

class CheckBox : public QCheckBox
{
    Q_OBJECT
public:
   explicit CheckBox(QWidget *parent = 0);

   void setText(const QString & text);
   QSize sizeHint() const;
   bool hitButton(const QPoint &pos) const;

protected:
   void paintEvent(QPaintEvent *);

private:
   QHBoxLayout* _layout;
   QLabel*      _label;
};

#endif // CHECKBOX_H




#include "checkbox.h"

#include <QStylePainter>
#include <QStyleOption>

#define MARGIN 4 // hardcoded spacing acording to QCommonStyle implementation

CheckBox::CheckBox(QWidget *parent) : QCheckBox(parent)
{
    setSizePolicy(QSizePolicy(QSizePolicy::Preferred, QSizePolicy::Preferred, QSizePolicy::CheckBox));

    QStyleOptionButton opt;
    initStyleOption(&opt);

    QRect label_rect = style()->subElementRect(QStyle::SE_CheckBoxContents, &opt, this);

    _label = new QLabel(this);
    _label->setWordWrap(true);
    _label->setMouseTracking(true);
    //_label->setMinimumHeight(label_rect.height());

    _layout = new QHBoxLayout(this);
    _layout->setContentsMargins(label_rect.left()+MARGIN, MARGIN/2, MARGIN/2, MARGIN/2);
    _layout->setSpacing(0);
    _layout->addWidget(_label);

    setLayout(_layout);
}

void CheckBox::setText(const QString & text)
{
    _label->setText(text);
    QCheckBox::setText(text);
}

void CheckBox::paintEvent(QPaintEvent *)
{
    QStylePainter p(this);
    QStyleOptionButton opt;
    initStyleOption(&opt);

    QStyleOptionButton subopt = opt;
    subopt.rect = style()->subElementRect(QStyle::SE_CheckBoxIndicator, &opt, this);
    subopt.rect.moveTop(opt.rect.top()+MARGIN/2); // align indicator to top

    style()->proxy()->drawPrimitive(QStyle::PE_IndicatorCheckBox, &subopt, &p, this);

    if (opt.state & QStyle::State_HasFocus)
    {
        QStyleOptionFocusRect fropt;
        fropt.QStyleOption::operator=(opt);
        fropt.rect = style()->subElementRect(QStyle::SE_CheckBoxFocusRect, &opt, this);
        style()->proxy()->drawPrimitive(QStyle::PE_FrameFocusRect, &fropt, &p, this);
    }
}

QSize CheckBox::sizeHint() const
{
    return QSize(); // will be calculated by layout
}

bool CheckBox::hitButton(const QPoint &pos) const
{
    QStyleOptionButton opt;
    initStyleOption(&opt);
    return opt.rect.contains(pos); // hit all button
}