QML -梯度不工作

Question

我正在学习QML，以便我能够创建不同类型的仪表板。我已经为我的项目创建了一个仪表板。在我的第一次测试中，我没有添加信号和槽，时间梯度工作正常。例如，如果我按下按钮，颜色将出现在按钮上。现在我已经将qml信号连接到c++，这是正常工作的，但梯度不工作。

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

您添加到按钮的MouseArea正在捕获您的鼠标点击。结果，Button本身没有被正确点击。移除MouseArea，使用Button的onClicked信号处理程序:

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

Gradient不工作，因为因为你的梯度停止必须在0和1之间。例如:0.25和0.75:

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

Answer 2

GradientStop位置不是问题，你可以使用相同的位置5和6。我已经为你创建了示例代码，你可以使用这个代码我没有改变渐变的位置。

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

Answer 3

感谢大家的回复。我已经找到了解决办法。雅正是这段代码工作正常，当我按下开始按钮信号传递到c++插槽，但我看不到我的仪表板在按下按钮时的颜色变化，所以我删除了鼠标区域简单地连接信号和插槽使用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" }
           }
         }
       }
     }
   }

Answer 4

GradientStop position必须在0.0和1.0