QPushButton: How to align icon and text

jpo38

Using Qt C++, I have some buttons with icons and text. As the text of all buttons does not have the same length, icons are not aligned:

enter image description here

I tried to use a QToolButton instead:

button->setToolButtonStyle( Qt::ToolButtonTextBesideIcon );
button->setSizePolicy( QSizePolicy( QSizePolicy::Policy::Expanding, button->sizePolicy().verticalPolicy() ) );

But no success, could not center the text, ended up with that:

enter image description here

Is there a way to have icons be aligned vertically and also text remain centered, like that:

enter image description here

cbuchart

You can achieve it by sub-classing QPushButton. Here an example with the minimum functionality:

class MyButton : public QPushButton {
public:
  explicit MyButton(QWidget* parent = nullptr) : QPushButton(parent) {}
  virtual ~MyButton() {}

  void setPixmap(const QPixmap& pixmap) { m_pixmap = pixmap; }

  virtual QSize sizeHint() const override {
    const auto parentHint = QPushButton::sizeHint();
    // add margins here if needed
    return QSize(parentHint.width() + m_pixmap.width(), std::max(parentHint.height(), m_pixmap.height()));
  }

protected:
  virtual void paintEvent(QPaintEvent* e) override {
    QPushButton::paintEvent(e);

    if (!m_pixmap.isNull()) {
      const int y = (height() - m_pixmap.height()) / 2; // add margin if needed
      QPainter painter(this);
      painter.drawPixmap(5, y, m_pixmap); // hardcoded horizontal margin
    }
  }

private:
  QPixmap m_pixmap;
};

If you want to use it from Qt Designer, just use the promote feature.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Java

How to vertically align text with icon font?

From Dev

Align text to the icon

From Dev

Align the facebook icon with the text in the button

From Dev

how to align the number in MarkerClusterer icon?

From Dev

How to get the text on qpushbutton?

From Dev

How to resize QPushButton according to the size of it's icon?

From Dev

Align Text In Bootstrap Well Beside FontAwesome Icon

From Dev

How can we delete icon from QPushButton?

From Dev

How to align badge on top of icon

From Dev

Align Text Beside FontAwesome Icon

From Dev

css align text with icon with

From Dev

align text and icon CSS

From Dev

How to align text next to an icon with CSS?

From Dev

Align icon vertically to the center of the first line of text

From Dev

How to vertically align an icon next to text in Bootstrap 3

From Dev

How to make Icon and Text align Left side on JButton

From Dev

Vertical align text alongside SVG icon

From Dev

How to align icon to the left with text to the right?

From Dev

How to align a QPushButton inside window?

From Dev

how to align the number in MarkerClusterer icon?

From Dev

How to align an icon to the right of content

From Dev

How to get the text on qpushbutton?

From Dev

How to vertically align icon font

From Dev

css align text with icon with

From Dev

align text and icon CSS

From Dev

How to align uilabel icon with text in iOS

From Dev

PyQt4 QPushButton text and icon alignment

From Dev

Align icon to left and text to center in react native

From Dev

How to align icon to the left and text to the center by using flex?