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

Can you show a [mcve] including the C++ code? – Mailerdaimon Aug 17 '16 at 06:11 — Mailerdaimon, Aug 17 '16 at 06:11

score 2 · Answer 1 · answered Aug 17 '16 at 08:12

2

The MouseArea you added to your button is capturing the your mouse clicks. As a result, the Button itself does not get clicked properly. Remove the MouseArea and instead use the Button's onClicked signal handler:

Button {
    ...
    onClicked: {
        example1.startClicked()
    }
    ....
}

The Gradient is not working because because your gradient stops have to be in between 0 and 1. E.g.: at 0.25 and 0.75:

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

answered Aug 17 '16 at 08:12

Peter K

1,372
8
24

He said that this code was working properly before adding C++ Signal handling. So, while this is a good answer, I dont think we can really answer the question fully without more information added to the question. – Mailerdaimon Aug 18 '16 at 08:34
I tried his code by removing the Example and simply printing "hello" where he would have called his slot. That did not even work, so I strongly believe that is part of the problem. – Peter K Aug 18 '16 at 08:38

score 0 · Answer 2 · answered Aug 19 '16 at 05:56

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

score 0 · Accepted Answer · answered Nov 08 '16 at 13:24

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

score -1 · Answer 4 · answered Aug 16 '16 at 14:20

-1

The GradientStop position has to be between 0.0 and 1.0

answered Aug 16 '16 at 14:20

Mailerdaimon

6,003
3
35
46

I have tried, but it is not working. Border color and radius, signal, slot everything working except this. – Jerwin Prabu Aug 17 '16 at 05:48

QML - Gradient not working

4 Answers4