QML - Gradient not working

Jerwinprabu

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" }
                    }
               }
           }
       }
   }

sletta

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

Jerwinprabu

@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" }
     }```

Jerwinprabu

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" }
           }
         }
       }
     }
   }