QML - Gradient not working

Question

I'm learning QML so that I'll be able to create a different kind of dashboard. 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 qml signals to c++, that is working properly, but gradient not working.

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

Answer 1

GradientStop position is not a problem you can use same position 5 and 6. I have created sample code for you, You can use this code I didnt change the gradient position.

                    Button {
                     id:Btn1
                     x:380
                     y:295
                     text: "run mode"
                     onClicked: {signal.on_clicked()}
                     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 ? "orange" : "#eee" }
                                 GradientStop { position: 6 ; color: control.pressed ? "orange" : "#ccc" }
                             }
                         }
                     }
                 }