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. Customization of push button
Forum Updated to NodeBB v4.3 + New Features

Customization of push button

Scheduled Pinned Locked Moved Solved General and Desktop
28 Posts 5 Posters 13.2k Views 3 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.
  • D Offline
    D Offline
    David406
    wrote on last edited by David406
    #1

    Hi all, I would like to create a row of buttons with customizing background and without any boundary lines, just like the following effect:

    alt text

    However, all I can get is:

    alt text

    with the following code:

            drawArrowBtn->move(x + width - 8 * 32, y + height);
            textEditBtn->move(x + width - 7 * 32, y + height);
            drawEllipseBtn->move(x + width - 6 * 32, y + height);
            drawRectBtn->move(x + width - 5 * 32, y + height);
            drawLineBtn->move(x + width - 4 * 32, y + height);
            saveAsBtn->move(x + width - 3 * 32, y + height);
            cancelBtn->move(x + width - 2 * 32, y + height);
            confirmBtn->move(x + width - 32, y + height);
    
            QPixmap arrow("://icons/arrow.png");
            QPixmap text("://icons/text.png");
            QPixmap ellipse("://icons/ellipse.png");
            QPixmap rect("://icons/rectangle.png");
            QPixmap line("://icons/pen.png");
            QPixmap save("://icons/save.png");
            QPixmap cancel("://icons/cancel.png");
    
            drawArrowBtn->setIcon(QIcon(arrow));
            textEditBtn->setIcon(QIcon(text));
            drawEllipseBtn->setIcon(QIcon(ellipse));
            drawRectBtn->setIcon(QIcon(rect));
            drawLineBtn->setIcon(QIcon(line));
            saveAsBtn->setIcon(QIcon(save));
            cancelBtn->setIcon(QIcon(cancel));
            //confirmBtn->setIcon(QIcon(confirm));
    
            textEditBtn->show();
            drawArrowBtn->show();
            drawEllipseBtn->show();
            drawRectBtn->show();
            drawLineBtn->show();
            saveAsBtn->show();
            cancelBtn->show();
            confirmBtn->show();
    

    I tried to read books and references on the properties of QPushButton, but still have no idea what should I do to dim the bounding box of push buttons. Also, I was aiming to create a continuous row of buttons, but there's always a gap between them.

    Did I use a wrong widget? I mean all the push buttons I saw are raised up with a rounding box, perhaps I shouldn't use the class? Could anyone please give some suggestions?

    J.HilkJ FlotisableF 2 Replies Last reply
    0
    • M Offline
      M Offline
      mostefa
      wrote on last edited by
      #2

      Hi @David406

      Why not use the stylesheet?

      http://doc.qt.io/qt-5/stylesheet-examples.html#customizing-a-qpushbutton-using-the-box-model

      1 Reply Last reply
      4
      • D David406

        Hi all, I would like to create a row of buttons with customizing background and without any boundary lines, just like the following effect:

        alt text

        However, all I can get is:

        alt text

        with the following code:

                drawArrowBtn->move(x + width - 8 * 32, y + height);
                textEditBtn->move(x + width - 7 * 32, y + height);
                drawEllipseBtn->move(x + width - 6 * 32, y + height);
                drawRectBtn->move(x + width - 5 * 32, y + height);
                drawLineBtn->move(x + width - 4 * 32, y + height);
                saveAsBtn->move(x + width - 3 * 32, y + height);
                cancelBtn->move(x + width - 2 * 32, y + height);
                confirmBtn->move(x + width - 32, y + height);
        
                QPixmap arrow("://icons/arrow.png");
                QPixmap text("://icons/text.png");
                QPixmap ellipse("://icons/ellipse.png");
                QPixmap rect("://icons/rectangle.png");
                QPixmap line("://icons/pen.png");
                QPixmap save("://icons/save.png");
                QPixmap cancel("://icons/cancel.png");
        
                drawArrowBtn->setIcon(QIcon(arrow));
                textEditBtn->setIcon(QIcon(text));
                drawEllipseBtn->setIcon(QIcon(ellipse));
                drawRectBtn->setIcon(QIcon(rect));
                drawLineBtn->setIcon(QIcon(line));
                saveAsBtn->setIcon(QIcon(save));
                cancelBtn->setIcon(QIcon(cancel));
                //confirmBtn->setIcon(QIcon(confirm));
        
                textEditBtn->show();
                drawArrowBtn->show();
                drawEllipseBtn->show();
                drawRectBtn->show();
                drawLineBtn->show();
                saveAsBtn->show();
                cancelBtn->show();
                confirmBtn->show();
        

        I tried to read books and references on the properties of QPushButton, but still have no idea what should I do to dim the bounding box of push buttons. Also, I was aiming to create a continuous row of buttons, but there's always a gap between them.

        Did I use a wrong widget? I mean all the push buttons I saw are raised up with a rounding box, perhaps I shouldn't use the class? Could anyone please give some suggestions?

        J.HilkJ Offline
        J.HilkJ Offline
        J.Hilk
        Moderators
        wrote on last edited by
        #3

        @David406

        Hi,

        the better way to solve this issue:
        First, using A QLayout that way you dont have to move your buttons individually and they adjust to changes in size automaticaly.

        Second, set the Picture via a StyleSheet like @mostefa suggested: setStyleSheet("QPushButton{border-image:url(pathToImg/img.png)}");

        You have the space between the buttons because, the Icon is not the whole PushButton

        To have the buttons, when inside a Layout, right next to each other, remember to set the spacing to 0.


        Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


        Q: What's that?
        A: It's blue light.
        Q: What does it do?
        A: It turns blue.

        D 1 Reply Last reply
        2
        • D David406

          Hi all, I would like to create a row of buttons with customizing background and without any boundary lines, just like the following effect:

          alt text

          However, all I can get is:

          alt text

          with the following code:

                  drawArrowBtn->move(x + width - 8 * 32, y + height);
                  textEditBtn->move(x + width - 7 * 32, y + height);
                  drawEllipseBtn->move(x + width - 6 * 32, y + height);
                  drawRectBtn->move(x + width - 5 * 32, y + height);
                  drawLineBtn->move(x + width - 4 * 32, y + height);
                  saveAsBtn->move(x + width - 3 * 32, y + height);
                  cancelBtn->move(x + width - 2 * 32, y + height);
                  confirmBtn->move(x + width - 32, y + height);
          
                  QPixmap arrow("://icons/arrow.png");
                  QPixmap text("://icons/text.png");
                  QPixmap ellipse("://icons/ellipse.png");
                  QPixmap rect("://icons/rectangle.png");
                  QPixmap line("://icons/pen.png");
                  QPixmap save("://icons/save.png");
                  QPixmap cancel("://icons/cancel.png");
          
                  drawArrowBtn->setIcon(QIcon(arrow));
                  textEditBtn->setIcon(QIcon(text));
                  drawEllipseBtn->setIcon(QIcon(ellipse));
                  drawRectBtn->setIcon(QIcon(rect));
                  drawLineBtn->setIcon(QIcon(line));
                  saveAsBtn->setIcon(QIcon(save));
                  cancelBtn->setIcon(QIcon(cancel));
                  //confirmBtn->setIcon(QIcon(confirm));
          
                  textEditBtn->show();
                  drawArrowBtn->show();
                  drawEllipseBtn->show();
                  drawRectBtn->show();
                  drawLineBtn->show();
                  saveAsBtn->show();
                  cancelBtn->show();
                  confirmBtn->show();
          

          I tried to read books and references on the properties of QPushButton, but still have no idea what should I do to dim the bounding box of push buttons. Also, I was aiming to create a continuous row of buttons, but there's always a gap between them.

          Did I use a wrong widget? I mean all the push buttons I saw are raised up with a rounding box, perhaps I shouldn't use the class? Could anyone please give some suggestions?

          FlotisableF Offline
          FlotisableF Offline
          Flotisable
          wrote on last edited by
          #4

          @David406
          maybe QToolButton is another choice?

          D 1 Reply Last reply
          0
          • J.HilkJ J.Hilk

            @David406

            Hi,

            the better way to solve this issue:
            First, using A QLayout that way you dont have to move your buttons individually and they adjust to changes in size automaticaly.

            Second, set the Picture via a StyleSheet like @mostefa suggested: setStyleSheet("QPushButton{border-image:url(pathToImg/img.png)}");

            You have the space between the buttons because, the Icon is not the whole PushButton

            To have the buttons, when inside a Layout, right next to each other, remember to set the spacing to 0.

            D Offline
            D Offline
            David406
            wrote on last edited by
            #5

            @J.Hilk
            Thanks a lot. Your suggestions are very helpful. But I also would like to move the layout widget to a give position. However, QHBoxLayout widget do not have this method. Do you have any suggestions?

            J.HilkJ 1 Reply Last reply
            0
            • FlotisableF Flotisable

              @David406
              maybe QToolButton is another choice?

              D Offline
              D Offline
              David406
              wrote on last edited by
              #6

              @Flotisable
              Do you mean QToolBar? This seems to be a good choice.

              FlotisableF 1 Reply Last reply
              0
              • D David406

                @J.Hilk
                Thanks a lot. Your suggestions are very helpful. But I also would like to move the layout widget to a give position. However, QHBoxLayout widget do not have this method. Do you have any suggestions?

                J.HilkJ Offline
                J.HilkJ Offline
                J.Hilk
                Moderators
                wrote on last edited by
                #7

                @David406 generally, I would suggest to place your whole UI into an interlocking construct of QLayouts.

                But if you dont want to do that,
                You can use a QFrame or QWidet as a parent for the QLayout and move that around.


                Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                Q: What's that?
                A: It's blue light.
                Q: What does it do?
                A: It turns blue.

                1 Reply Last reply
                0
                • D David406

                  @Flotisable
                  Do you mean QToolBar? This seems to be a good choice.

                  FlotisableF Offline
                  FlotisableF Offline
                  Flotisable
                  wrote on last edited by
                  #8

                  @David406
                  no, QToolButton is a special button that is usually used in QToolBar

                  you can read the document of QToolButton and QToolBar

                  1 Reply Last reply
                  0
                  • Venkatesh VV Offline
                    Venkatesh VV Offline
                    Venkatesh V
                    wrote on last edited by
                    #9

                    @David406
                    set it for all your button,
                    button->setFlat(true);
                    it solves your problem.

                    1 Reply Last reply
                    1
                    • D Offline
                      D Offline
                      David406
                      wrote on last edited by David406
                      #10

                      Hi all, thanks for all of your help! I tried to set my buttons flat with
                      button->setFlat(true);
                      and it looks good. But there is still a problem remained, that is, I can't set
                      the background color the these button. I was using stylesheet

                      drawArrowBtn->setStyleSheet("QPushButton{background-color:rgb(255, 255, 255)}");
                      

                      See below:

                      alt text

                      The background color only come into effect when I click on the button:

                      alt text

                      Any suggestions?

                      J.HilkJ M 2 Replies Last reply
                      0
                      • D David406

                        Hi all, thanks for all of your help! I tried to set my buttons flat with
                        button->setFlat(true);
                        and it looks good. But there is still a problem remained, that is, I can't set
                        the background color the these button. I was using stylesheet

                        drawArrowBtn->setStyleSheet("QPushButton{background-color:rgb(255, 255, 255)}");
                        

                        See below:

                        alt text

                        The background color only come into effect when I click on the button:

                        alt text

                        Any suggestions?

                        J.HilkJ Offline
                        J.HilkJ Offline
                        J.Hilk
                        Moderators
                        wrote on last edited by
                        #11

                        @David406

                        are you sure the stylesheet is applied at all? And is this the only place where you set a stylesheet;

                        theres a t least a ; missing, what usually results in a stylesheet parsing error.

                        drawArrowBtn->setStyleSheet("QPushButton{background-color:rgb(255, 255, 255);}");
                        

                        Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                        Q: What's that?
                        A: It's blue light.
                        Q: What does it do?
                        A: It turns blue.

                        D 1 Reply Last reply
                        0
                        • D David406

                          Hi all, thanks for all of your help! I tried to set my buttons flat with
                          button->setFlat(true);
                          and it looks good. But there is still a problem remained, that is, I can't set
                          the background color the these button. I was using stylesheet

                          drawArrowBtn->setStyleSheet("QPushButton{background-color:rgb(255, 255, 255)}");
                          

                          See below:

                          alt text

                          The background color only come into effect when I click on the button:

                          alt text

                          Any suggestions?

                          M Offline
                          M Offline
                          mostefa
                          wrote on last edited by mostefa
                          #12

                          @David406 said in Customization of push button:

                          Hi all, thanks for all of your help! I tried to set my buttons flat with
                          button->setFlat(true);
                          and it looks good. But there is still a problem remained, that is, I can't set
                          the background color the these button. I was using stylesheet

                          drawArrowBtn->setStyleSheet("QPushButton{background-color:rgb(255, 255, 255)}");
                          

                          See below:

                          alt text

                          The background color only come into effect when I click on the button:

                          alt text

                          Any suggestions?

                          Is your QPushButton checkable??

                          If yes you need to add stylesheet when button is checked

                          I think that this should be something like this:

                          QPushButton:checked{background-color: white;};
                          
                          D 1 Reply Last reply
                          0
                          • M mostefa

                            @David406 said in Customization of push button:

                            Hi all, thanks for all of your help! I tried to set my buttons flat with
                            button->setFlat(true);
                            and it looks good. But there is still a problem remained, that is, I can't set
                            the background color the these button. I was using stylesheet

                            drawArrowBtn->setStyleSheet("QPushButton{background-color:rgb(255, 255, 255)}");
                            

                            See below:

                            alt text

                            The background color only come into effect when I click on the button:

                            alt text

                            Any suggestions?

                            Is your QPushButton checkable??

                            If yes you need to add stylesheet when button is checked

                            I think that this should be something like this:

                            QPushButton:checked{background-color: white;};
                            
                            D Offline
                            D Offline
                            David406
                            wrote on last edited by David406
                            #13

                            @mostefa
                            Thanks.
                            Yes, my button is checkable.
                            I think you mis-understand my intention. I want my buttons to be set with background color of my choice without even pressing it. However, this code

                            drawArrowBtn->setStyleSheet("QPushButton{background-color:rgb(255, 255, 255)}");
                            

                            only works when I push the button (second picture). When the buttons are un-pushed, the background color set in the setStyleSheet does not help in any means (first picture).

                            M 1 Reply Last reply
                            0
                            • D David406

                              @mostefa
                              Thanks.
                              Yes, my button is checkable.
                              I think you mis-understand my intention. I want my buttons to be set with background color of my choice without even pressing it. However, this code

                              drawArrowBtn->setStyleSheet("QPushButton{background-color:rgb(255, 255, 255)}");
                              

                              only works when I push the button (second picture). When the buttons are un-pushed, the background color set in the setStyleSheet does not help in any means (first picture).

                              M Offline
                              M Offline
                              mostefa
                              wrote on last edited by
                              #14

                              @David406 said in Customization of push button:

                              @mostefa
                              Thanks.
                              Yes, my button is checkable.
                              I think you mis-understand my intention. I want my buttons to be set with background color of my choice without even pressing it. However, this code

                              drawArrowBtn->setStyleSheet("QPushButton{background-color:rgb(255, 255, 255)}");
                              

                              only works when I push the button (second picture). When the buttons are un-pushed, the background color set in the setStyleSheet does not help in any means.

                              Ok

                              Then what about unchecked property?

                              QPushButton:unchecked{background-color: white;};
                              
                              D 1 Reply Last reply
                              0
                              • J.HilkJ J.Hilk

                                @David406

                                are you sure the stylesheet is applied at all? And is this the only place where you set a stylesheet;

                                theres a t least a ; missing, what usually results in a stylesheet parsing error.

                                drawArrowBtn->setStyleSheet("QPushButton{background-color:rgb(255, 255, 255);}");
                                
                                D Offline
                                D Offline
                                David406
                                wrote on last edited by David406
                                #15

                                @J.Hilk
                                Thanks.
                                Yes, I'm sure this stylesheet applied. because I leave other button un-setting the stylesheet as a comparison, and it's obviously different:

                                alt text

                                M 1 Reply Last reply
                                0
                                • M mostefa

                                  @David406 said in Customization of push button:

                                  @mostefa
                                  Thanks.
                                  Yes, my button is checkable.
                                  I think you mis-understand my intention. I want my buttons to be set with background color of my choice without even pressing it. However, this code

                                  drawArrowBtn->setStyleSheet("QPushButton{background-color:rgb(255, 255, 255)}");
                                  

                                  only works when I push the button (second picture). When the buttons are un-pushed, the background color set in the setStyleSheet does not help in any means.

                                  Ok

                                  Then what about unchecked property?

                                  QPushButton:unchecked{background-color: white;};
                                  
                                  D Offline
                                  D Offline
                                  David406
                                  wrote on last edited by
                                  #16

                                  @mostefa
                                  Unfortunately,

                                  QPushButton:unchecked{background-color: white;};
                                  

                                  doesn't help.

                                  1 Reply Last reply
                                  0
                                  • D David406

                                    @J.Hilk
                                    Thanks.
                                    Yes, I'm sure this stylesheet applied. because I leave other button un-setting the stylesheet as a comparison, and it's obviously different:

                                    alt text

                                    M Offline
                                    M Offline
                                    mostefa
                                    wrote on last edited by mostefa
                                    #17

                                    @David406 said in Customization of push button:

                                    @J.Hilk
                                    Thanks.
                                    Yes, I'm sure this stylesheet applied. because I leave other button un-setting the stylesheet as a comparison, and it's obviously different:

                                    alt text

                                    Hi again @David406

                                    i am not sure that setFlat(true) is really what do you want,

                                    http://doc.qt.io/qt-5/qpushbutton.html#flat-prop

                                    The doc actually says:

                                    If this property is set, most styles will not paint the button background unless the button is being pressed.
                                    

                                    And i think that this is your problem,

                                    So i suggest you to delete the line pushbutton->setFlat(true)

                                    And setStylesheet of your PushButton as follow

                                    QPushButton
                                    {
                                    border-style: outset;
                                    background-color: red ;/** for example **/
                                    }
                                    

                                    Keep me informed if this is what you want or no?

                                    Best regards !

                                    D 1 Reply Last reply
                                    3
                                    • M mostefa

                                      @David406 said in Customization of push button:

                                      @J.Hilk
                                      Thanks.
                                      Yes, I'm sure this stylesheet applied. because I leave other button un-setting the stylesheet as a comparison, and it's obviously different:

                                      alt text

                                      Hi again @David406

                                      i am not sure that setFlat(true) is really what do you want,

                                      http://doc.qt.io/qt-5/qpushbutton.html#flat-prop

                                      The doc actually says:

                                      If this property is set, most styles will not paint the button background unless the button is being pressed.
                                      

                                      And i think that this is your problem,

                                      So i suggest you to delete the line pushbutton->setFlat(true)

                                      And setStylesheet of your PushButton as follow

                                      QPushButton
                                      {
                                      border-style: outset;
                                      background-color: red ;/** for example **/
                                      }
                                      

                                      Keep me informed if this is what you want or no?

                                      Best regards !

                                      D Offline
                                      D Offline
                                      David406
                                      wrote on last edited by David406
                                      #18

                                      @mostefa
                                      Thanks again.
                                      Yes, this helped. But there are separators between the buttons which I don't want, see below:

                                      alt text

                                      this is also the reason I used setflat(true). Any suggestion to eliminate those separators?

                                      J.HilkJ M 2 Replies Last reply
                                      0
                                      • D David406

                                        @mostefa
                                        Thanks again.
                                        Yes, this helped. But there are separators between the buttons which I don't want, see below:

                                        alt text

                                        this is also the reason I used setflat(true). Any suggestion to eliminate those separators?

                                        J.HilkJ Offline
                                        J.HilkJ Offline
                                        J.Hilk
                                        Moderators
                                        wrote on last edited by
                                        #19

                                        @David406

                                        QPushButton{border: none;}
                                        

                                        Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


                                        Q: What's that?
                                        A: It's blue light.
                                        Q: What does it do?
                                        A: It turns blue.

                                        M 1 Reply Last reply
                                        1
                                        • D David406

                                          @mostefa
                                          Thanks again.
                                          Yes, this helped. But there are separators between the buttons which I don't want, see below:

                                          alt text

                                          this is also the reason I used setflat(true). Any suggestion to eliminate those separators?

                                          M Offline
                                          M Offline
                                          mostefa
                                          wrote on last edited by mostefa
                                          #20

                                          @David406 said in Customization of push button:

                                          this is also the reason I used setflat(true)

                                          Any suggestion to eliminate those separators?

                                          How are you adding your buttons?

                                          With yourPushButton->move(x + width - 8 * 32, y + height);
                                          why -8*32 ,cause of spacing is maybe here, why just -8 * 32 ?

                                          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