Creating capsule style toolbar elements in Qt

Question

What is the best way to render capsule-style toolbar elements (including label text under buttons) in a Qt application?

Regarding the display of buttons, I want to make the most of what is provided by Mac OS. (I'm not a Mac developer, so I don’t know if he has an API for this.) That is, I know that I can draw them myself, use stylesheets for the border image, guess the font and set it all in the layout, but is there a better one A way to ensure consistent presentation when a Mac updates its “look”? I am using C ++ in Qt.

I do not hate the idea of ​​using Q_WS_MAC to get rendering for the platform, but does Qt already have something for this? Do you know the setCapsuleStyle(true) method somewhere? :)

Thanks for any suggestions.

Answer 1

The qt-labs repository has an example of a segmented button that looks decent on KDE. It has enough #ifdef Q_WS_MAC code, but I don’t know how well it renders on a Mac. You can find it here .

If you are targeting Mac only, you can use the QMacCocoaViewContainer to render your own segmented buttons. The learning curve is pretty steep, so you can find this Qt Labs blog post about the Mac widget interesting: Mac style widgets add-ons . The author provides three Mac-style widgets: QtCocoaPushButton, QtCocoaComboBox, and QtCocoaSegmentedButton.

Answer 2

Since Qt does not provide this kind of widget on its own, a better way would be to subclass QPushButton and override paintEvent . You can then draw your pixmap capsule by simply drawing a QPixmap containing a screenshot of the capsule button. You can add click behavior by overriding mousePressEvent and mouseReleaseEvent .

 // CapsuleButton.h class CapsuleButton : public QPushPutton { // ... protected: void paintEvent(QPaintEvent*); void mousePressEvent(QMouseEvent*); void mouseReleaseEvent(QMouseEvent*); // ... private: QPixmap pixmap_; QPixmap pressedPixmap_; bool pressed_; }; // CapsuleButton.cpp CapsuleButton::CapsuleButton(QObject* parent) : QPushButton(parent), pixmap_(":/capsule-button-background.png"), pressedPixmap_(":/capsule-button-background-pressed.png"), pressed_(false) { /*...*/ } void CapsuleButton::paintEvent(QPaintEvent *) { QPainter painter(this); painter.drawPixmap(rect(), pressed_? pressedPixmap_ : pixmap_); } void CapsuleButton::mousePressEvent(QMouseEvent* event) { if (event->button() == Qt::LeftButton) pressed_ = true; update(); } void CapsuleButton::mouseReleaseEvent(QMouseEvent*) { pressed_ = false; update(); } 

I have a short tutorial on creating custom widgets: http://www.serenethinking.com/2010/08/how-to-create-custom-widgets-with-qt/

Maybe this helps.

Answer 3

I have done similar things in the past. Unfortunately, I do not have the source code to share with you. However, the safest bet is to use the Qt Style sheet . They support various properties, pseudo-states and subcontrollers that allow you to customize the appearance to any degree.