QML - Gradient not working



  • I have created a dashboard for my project. In my first review I didn't add signal and slot, that time gradient worked properly. For example if I press the button color will appear on button. Now I have connected signals and slot but gradient not working.

    Problem :

              gradient: Gradient {
                       GradientStop { position: 5 ; color: control.pressed ? "red" : "#eee" }
                       GradientStop { position: 6 ; color: control.pressed ? "red" : "#ccc" }
                            }
    

    qrc.qml

          Item {
              Example { 
                 id: example1;
                      }
                    Button {
                        x:380
                        y:295
                        text: "Start"
                      MouseArea {
                         anchors.fill: parent
                         onClicked: example1.startClicked()
                      }
                        style: ButtonStyle {
                            background: Rectangle {
                             implicitWidth: 100
                             implicitHeight: 40
                             border.width: control.activeFocus ? 1 : 2
                             border.color: "red"
                             radius: 10
                             gradient: Gradient {
                             GradientStop { position: 5 ; color: control.pressed ? "red" : "#eee" }
                             GradientStop { position: 6 ; color: control.pressed ? "red" : "#ccc" }
                        }
                   }
               }
           }
       }
    


  • @Jerwinprabu GradientStop::position expects a value between 0 and 1. 0 means the top of the rectangle and 1 is the bottom.



  • @sletta I have tried, but It is not working. Before that I didn't added MouseArea, that time it was working When I have added Mouse Area clicked, it is not working but signal and slot working. If I press the button signal and slot message printed, only problem this (I cannot see the color changes in the button).

      gradient: Gradient {
              GradientStop { position:0.0 ; color: control.pressed ? "red" : "#eee" }
              GradientStop { position:1.0 ; color: control.pressed ? "red" : "#ccc" }
         }```


  • Thanks for your response guys. I have found a solution for that. Ya exactly this code was working properly, when I press the start button signal is passing to c++ slot, but I cannot see the color changes in my dashboard at the time of pressing the button, So I have deleted mouse area simply connected signal and slot using onClicked.

    Item {
       Example { //here's the instance, remember it is declarative
                 id: example1;
               }
           Button {
                    x:380
                    y:295
                    text: "Start"
                        onClicked: example1.startThread()
          style: ButtonStyle {
              background: Rectangle {
                        implicitWidth: 100
                        implicitHeight: 40
                        border.width: control.activeFocus ? 1 : 2
                        border.color: "red"
                        radius: 10
          gradient: Gradient {
                  GradientStop { position: 5 ; color: control.pressed ? "red" : "#eee" }
                  GradientStop { position: 6 ; color: control.pressed ? "red" : "#ccc" }
               }
             }
           }
         }
       }
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.