Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Creating a custom button with two labels.
QtWS25 Last Chance

Creating a custom button with two labels.

Scheduled Pinned Locked Moved Solved General and Desktop
5 Posts 2 Posters 1.3k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • S Offline
    S Offline
    superg
    wrote on 21 Dec 2022, 23:09 last edited by
    #1

    Hello,
    I'm trying to create a custom button that has two labels. It has to look like this:

    Screen Shot 2022-12-21 at 19.48.24 PM.png

    I created a subclass of QPushButton to override the paintEvent() method, with no luck.
    This is the code:
    ResultButton.h

    
    class ResultButton : public QPushButton
    {
        Q_OBJECT
    public:
        explicit ResultButton(QWidget* parent = nullptr, QString mainText = nullptr, QString lowText = nullptr);
        virtual ~ResultButton();
        void setLowerText(QString s);
        QString getLowerText();
    
    protected:
        virtual void paintEvent(QPaintEvent* e) override;
    
    private:
        QLabel lowLabel;
    
    };
    

    ResultButton.cpp

    ResultButton::ResultButton(QWidget *parent, QString mainText, QString lowText) :
        QPushButton(parent)
    {
        setText(mainText);
        setLowerText(lowText);
    
        setStyleSheet("background-color:#304A8D; width:250px;font-size:20px;height:50px;border-radius: 10px;color:white;margin-bottom:1px;");
    
    }
    
    ResultButton::~ResultButton() {}
    
    void ResultButton::setLowerText(QString s) { lowLabel.setText(s);}
    
    QString ResultButton::getLowerText() { return lowLabel.text();}
    
    void ResultButton::paintEvent(QPaintEvent *e)
    {
        QPushButton::paintEvent(e);
    
        if (!lowLabel.text().isEmpty() && !text().isEmpty())
        {
            QPainter painter(this);
            int x = width() / 2; // middle of the button
            int y = (height() - lowLabel.height()) / 2; 
            painter.drawText(x,y,lowLabel.text());
        }
    }
    

    This doesn't work. When I add one of these new buttons, I only get a regular QPushButton. I only see the mainText added. The lowText does not get added to the button (I mean it's not seen).
    This:
    Screen Shot 2022-12-21 at 20.06.19 PM.png is what I see after the execution of the following code:

    ResultButton* rb = new ResultButton(this, "Ensayo 600", "15/5/2022");
    

    Can anyone help me?
    Thanks in advance.

    1 Reply Last reply
    0
    • J Offline
      J Offline
      JoeCFD
      wrote on 21 Dec 2022, 23:41 last edited by JoeCFD
      #2

      can you simply create a QVBoxLayout in class ResultButton and then add the two labels to the layout?

      ResultButton::ResultButton(QWidget *parent, QString mainText, QString lowText) :
          QPushButton(parent)
      {
          auto vlayout = new QVBoxLayout( this );
          vlayout->addWidget( new QLabel( mainText, this  )  );
          vlayout->addWidget( new QLabel( lowText, this  )  );
      }
      
      S 1 Reply Last reply 22 Dec 2022, 03:34
      1
      • J JoeCFD
        21 Dec 2022, 23:41

        can you simply create a QVBoxLayout in class ResultButton and then add the two labels to the layout?

        ResultButton::ResultButton(QWidget *parent, QString mainText, QString lowText) :
            QPushButton(parent)
        {
            auto vlayout = new QVBoxLayout( this );
            vlayout->addWidget( new QLabel( mainText, this  )  );
            vlayout->addWidget( new QLabel( lowText, this  )  );
        }
        
        S Offline
        S Offline
        superg
        wrote on 22 Dec 2022, 03:34 last edited by
        #3

        @JoeCFD Thanks for the response. This works but now I have a problem with the size of the text. I see this when executing the code you provided:
        Screen Shot 2022-12-22 at 00.07.22 AM.png
        As you can see, the text is displayed but it's at the left and of the same size. How can I change the sizes of the texts separately to make them look like the example I showed before?

        1 Reply Last reply
        0
        • J Offline
          J Offline
          JoeCFD
          wrote on 22 Dec 2022, 04:04 last edited by
          #4

          I gave you simple code. You can set size and font for your labels. I guess you know these things.

          S 1 Reply Last reply 22 Dec 2022, 04:42
          0
          • J JoeCFD
            22 Dec 2022, 04:04

            I gave you simple code. You can set size and font for your labels. I guess you know these things.

            S Offline
            S Offline
            superg
            wrote on 22 Dec 2022, 04:42 last edited by superg
            #5

            @JoeCFD I'm pretty new to Qt, but I found some methods in the QLabel Class documentation that could help with this. Thank you.

            1 Reply Last reply
            0

            5/5

            22 Dec 2022, 04:42

            • Login

            • Login or register to search.
            5 out of 5
            • First post
              5/5
              Last post
            0
            • Categories
            • Recent
            • Tags
            • Popular
            • Users
            • Groups
            • Search
            • Get Qt Extensions
            • Unsolved