Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. QML - Gradient not working
Forum Updated to NodeBB v4.3 + New Features

QML - Gradient not working

Scheduled Pinned Locked Moved Solved QML and Qt Quick
4 Posts 2 Posters 1.6k Views
  • 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.
  • JerwinprabuJ Offline
    JerwinprabuJ Offline
    Jerwinprabu
    wrote on last edited by
    #1

    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" }
                        }
                   }
               }
           }
       }
    
    slettaS 1 Reply Last reply
    0
    • JerwinprabuJ 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" }
                          }
                     }
                 }
             }
         }
      
      slettaS Offline
      slettaS Offline
      sletta
      wrote on last edited by
      #2

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

      JerwinprabuJ 1 Reply Last reply
      0
      • slettaS sletta

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

        JerwinprabuJ Offline
        JerwinprabuJ Offline
        Jerwinprabu
        wrote on last edited by
        #3

        @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" }
             }```
        1 Reply Last reply
        0
        • JerwinprabuJ Offline
          JerwinprabuJ Offline
          Jerwinprabu
          wrote on last edited by
          #4

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