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. QPushButton with icon, dressing size?
Qt 6.11 is out! See what's new in the release blog

QPushButton with icon, dressing size?

Scheduled Pinned Locked Moved Solved General and Desktop
10 Posts 4 Posters 6.8k Views 2 Watching
  • 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.
  • SPlattenS Offline
    SPlattenS Offline
    SPlatten
    wrote on last edited by
    #1

    I want to set a push button to a specific width using the following logic:

    //Get the default size of a QPushButton
    const QSize cobjPBtnSize(QPushButton::size());
    //Only need the height
    const int cintHeight(cobjPBtnSize.height());
    //The size of the icon that will appear in the button
    const QSize cobjSize(24, cintHeight);
    setIcon(objIcon);
    setIconSize(cobjSize);
    setFixedSize(crobjSize);
    

    I know this isn't quite right, what I want to do before setFixedSize is adjust the size of to allow for the border and shading, the sharing a typical button has...how or where do I get these figures?

    Kind Regards,
    Sy

    1 Reply Last reply
    0
    • M Offline
      M Offline
      mpergand
      wrote on last edited by
      #7
      class Button : public QPushButton
      {
          public:
          
          Button(const QString& iconPath)
              {
              icon=QIcon(iconPath);
              }
          
          void paintEvent(QPaintEvent *ev) 
              {
              QPushButton::paintEvent(ev);
              
              QPainter painter(this);
              QRect rec=contentsRect();
              rec.adjust(0,8,-0,-10);     // margins specific to MacOs 
              
              int h=rec.size().height();
              QSize size(h,h);
              QPoint top=rec.topLeft();
              top.setX((rec.width()-h)/2);
      
              // draw the outline rec of the button to visualise the real size of the widget !
              painter.drawRect(rect().adjusted(0,0,-1,-1));
              
              painter.drawPixmap(QRect(top,size), icon.pixmap(size));
              
              qDebug()<<QRect(top,size)<<contentsRect();
              }
          
          private:
          QIcon icon;
      };
      

      alt text

      svg drawn as image in a QPushButton
      The problem are the extra margins around the button on Mac (not portable)

      SPlattenS 2 Replies Last reply
      2
      • C Offline
        C Offline
        ChrisW67
        wrote on last edited by
        #2

        @SPlatten said in QPushButton with icon, dressing size?:

        const QSize cobjPBtnSize(QPushButton::size());

        There is no static size() function, so I am not sure what this would even compile.

        The size of the push button will be dictated by the layout it is placed in and the constraint imposed by that layout and the push button itself. The closest thing to a "default" size is the sizeHint() the button returns. Since most push buttons will not expand vertically the height of the size hint should be a reasonable guide.

        The precise borders and buffers and surround any icon applied are a function of the style in use (which can vary). They are available inside the widget rendering code through the QStyle and QStyleOption classes. They are not generally available elsewhere I am aware of.

        What are you trying to achieve by forcing the icon size?

        SPlattenS 1 Reply Last reply
        0
        • C ChrisW67

          @SPlatten said in QPushButton with icon, dressing size?:

          const QSize cobjPBtnSize(QPushButton::size());

          There is no static size() function, so I am not sure what this would even compile.

          The size of the push button will be dictated by the layout it is placed in and the constraint imposed by that layout and the push button itself. The closest thing to a "default" size is the sizeHint() the button returns. Since most push buttons will not expand vertically the height of the size hint should be a reasonable guide.

          The precise borders and buffers and surround any icon applied are a function of the style in use (which can vary). They are available inside the widget rendering code through the QStyle and QStyleOption classes. They are not generally available elsewhere I am aware of.

          What are you trying to achieve by forcing the icon size?

          SPlattenS Offline
          SPlattenS Offline
          SPlatten
          wrote on last edited by SPlatten
          #3

          @ChrisW67 , it does compile:
          https://doc.qt.io/qt-5/qpushbutton.html

          Just enter the text into Qt Creator QPushButton:: then add size it pops up and does compile.

          Actually the size property is part of QWidget which is obviously inherited by the push button widget:
          https://doc.qt.io/qt-5/qwidget.html

          What I want is a button that is the size of the toolbar icon with enough space around it for the borders so it looks like a regular button just with the icon in it instead of text.

          Kind Regards,
          Sy

          JonBJ 1 Reply Last reply
          0
          • SPlattenS SPlatten

            @ChrisW67 , it does compile:
            https://doc.qt.io/qt-5/qpushbutton.html

            Just enter the text into Qt Creator QPushButton:: then add size it pops up and does compile.

            Actually the size property is part of QWidget which is obviously inherited by the push button widget:
            https://doc.qt.io/qt-5/qwidget.html

            What I want is a button that is the size of the toolbar icon with enough space around it for the borders so it looks like a regular button just with the icon in it instead of text.

            JonBJ Offline
            JonBJ Offline
            JonB
            wrote on last edited by JonB
            #4

            @SPlatten
            You mean your const QSize cobjPBtnSize(QPushButton::size());, and the whole code, is inside a subclass of QPushButton you have, don't you? I think @ChrisW67 missed that. One of the C++ syntaxes I don't like: a call to to a base class method looks identical to a call to a static method :(

            1 Reply Last reply
            0
            • C Offline
              C Offline
              ChrisW67
              wrote on last edited by
              #5

              I did miss that. Whether it makes sense inside a QPushButton subclass is a different question.

              What I want is a button that is the size of the toolbar icon with enough space around it for the borders so it looks like a regular button just with the icon in it instead of text.

              Have you considered (ab)using a QToolButton? This is a no-text rendering by default: button fits icon.

              SPlattenS 1 Reply Last reply
              2
              • C ChrisW67

                I did miss that. Whether it makes sense inside a QPushButton subclass is a different question.

                What I want is a button that is the size of the toolbar icon with enough space around it for the borders so it looks like a regular button just with the icon in it instead of text.

                Have you considered (ab)using a QToolButton? This is a no-text rendering by default: button fits icon.

                SPlattenS Offline
                SPlattenS Offline
                SPlatten
                wrote on last edited by SPlatten
                #6

                @ChrisW67 , thank you, I will investigate, where I want to use this is in a button bar at the bottom of a dialog where I could have the following:

                • Button to apply changes (with Apply text).
                • Buttons to Undo and Redo with the icon inside for each
                • Button with OK text to apply and close dialog
                • Button with Cancel text to cancel any changes and close dialog

                This is what I have so far:
                Screenshot 2022-01-23 at 08.42.57.png
                What I want is for all the buttons to have the same appearance, not the square boxes that are currently around the icons, but the same looking buttons with the white background as the icons are PNG resources with transparent backgrounds.

                I think I'm going to replace all of these with buttons containing SVG images.

                Kind Regards,
                Sy

                1 Reply Last reply
                0
                • M Offline
                  M Offline
                  mpergand
                  wrote on last edited by
                  #7
                  class Button : public QPushButton
                  {
                      public:
                      
                      Button(const QString& iconPath)
                          {
                          icon=QIcon(iconPath);
                          }
                      
                      void paintEvent(QPaintEvent *ev) 
                          {
                          QPushButton::paintEvent(ev);
                          
                          QPainter painter(this);
                          QRect rec=contentsRect();
                          rec.adjust(0,8,-0,-10);     // margins specific to MacOs 
                          
                          int h=rec.size().height();
                          QSize size(h,h);
                          QPoint top=rec.topLeft();
                          top.setX((rec.width()-h)/2);
                  
                          // draw the outline rec of the button to visualise the real size of the widget !
                          painter.drawRect(rect().adjusted(0,0,-1,-1));
                          
                          painter.drawPixmap(QRect(top,size), icon.pixmap(size));
                          
                          qDebug()<<QRect(top,size)<<contentsRect();
                          }
                      
                      private:
                      QIcon icon;
                  };
                  

                  alt text

                  svg drawn as image in a QPushButton
                  The problem are the extra margins around the button on Mac (not portable)

                  SPlattenS 2 Replies Last reply
                  2
                  • M mpergand
                    class Button : public QPushButton
                    {
                        public:
                        
                        Button(const QString& iconPath)
                            {
                            icon=QIcon(iconPath);
                            }
                        
                        void paintEvent(QPaintEvent *ev) 
                            {
                            QPushButton::paintEvent(ev);
                            
                            QPainter painter(this);
                            QRect rec=contentsRect();
                            rec.adjust(0,8,-0,-10);     // margins specific to MacOs 
                            
                            int h=rec.size().height();
                            QSize size(h,h);
                            QPoint top=rec.topLeft();
                            top.setX((rec.width()-h)/2);
                    
                            // draw the outline rec of the button to visualise the real size of the widget !
                            painter.drawRect(rect().adjusted(0,0,-1,-1));
                            
                            painter.drawPixmap(QRect(top,size), icon.pixmap(size));
                            
                            qDebug()<<QRect(top,size)<<contentsRect();
                            }
                        
                        private:
                        QIcon icon;
                    };
                    

                    alt text

                    svg drawn as image in a QPushButton
                    The problem are the extra margins around the button on Mac (not portable)

                    SPlattenS Offline
                    SPlattenS Offline
                    SPlatten
                    wrote on last edited by
                    #8

                    @mpergand , thank you, that's great!

                    Kind Regards,
                    Sy

                    1 Reply Last reply
                    0
                    • M mpergand
                      class Button : public QPushButton
                      {
                          public:
                          
                          Button(const QString& iconPath)
                              {
                              icon=QIcon(iconPath);
                              }
                          
                          void paintEvent(QPaintEvent *ev) 
                              {
                              QPushButton::paintEvent(ev);
                              
                              QPainter painter(this);
                              QRect rec=contentsRect();
                              rec.adjust(0,8,-0,-10);     // margins specific to MacOs 
                              
                              int h=rec.size().height();
                              QSize size(h,h);
                              QPoint top=rec.topLeft();
                              top.setX((rec.width()-h)/2);
                      
                              // draw the outline rec of the button to visualise the real size of the widget !
                              painter.drawRect(rect().adjusted(0,0,-1,-1));
                              
                              painter.drawPixmap(QRect(top,size), icon.pixmap(size));
                              
                              qDebug()<<QRect(top,size)<<contentsRect();
                              }
                          
                          private:
                          QIcon icon;
                      };
                      

                      alt text

                      svg drawn as image in a QPushButton
                      The problem are the extra margins around the button on Mac (not portable)

                      SPlattenS Offline
                      SPlattenS Offline
                      SPlatten
                      wrote on last edited by SPlatten
                      #9

                      @mpergand , with regard to the magic numbers 0,8,-0,-10, isn't there anything defined in Qt for this? I would have thought that somewhere in the depths of Qt that this information is defined?

                      This is what I have now:
                      Screenshot 2022-01-24 at 09.00.02.png

                      @mpergand , actually, don't need the numbers now, my code for the above:

                          if ( strAPI.isEmpty() != true ) {
                          //Set the text according to the API
                              QString strText;
                              QIcon objIcon;
                              pobjNode->getAPIcontent(strAPI, strText, objIcon);
                              if ( strText.isEmpty() != true ) {
                                  setText(strText);
                              } else if ( objIcon.isNull() != true ) {
                                  setIcon(objIcon);            
                              }
                          }
                      

                      The above is in my constructor for my overridden instance of QPushButton, I didn't need to do anything to the paintEvent.

                      Kind Regards,
                      Sy

                      M 1 Reply Last reply
                      1
                      • SPlattenS SPlatten

                        @mpergand , with regard to the magic numbers 0,8,-0,-10, isn't there anything defined in Qt for this? I would have thought that somewhere in the depths of Qt that this information is defined?

                        This is what I have now:
                        Screenshot 2022-01-24 at 09.00.02.png

                        @mpergand , actually, don't need the numbers now, my code for the above:

                            if ( strAPI.isEmpty() != true ) {
                            //Set the text according to the API
                                QString strText;
                                QIcon objIcon;
                                pobjNode->getAPIcontent(strAPI, strText, objIcon);
                                if ( strText.isEmpty() != true ) {
                                    setText(strText);
                                } else if ( objIcon.isNull() != true ) {
                                    setIcon(objIcon);            
                                }
                            }
                        

                        The above is in my constructor for my overridden instance of QPushButton, I didn't need to do anything to the paintEvent.

                        M Offline
                        M Offline
                        mpergand
                        wrote on last edited by
                        #10

                        @SPlatten
                        You're right, I missed setIcon() in QAbstractButton.
                        No need to paint anything, good to know.

                        1 Reply Last reply
                        0

                        • Login

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