QML - 渐变不起作用答案

【问题标题】：QML - Gradient not workingQML - 渐变不起作用
【发布时间】：2016-08-16 13:43:09
【问题描述】：

我正在学习 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" }
                    }
               }
           }
       }
   }

【问题讨论】：

你能显示一个minimal reproducible example 包括C++ 代码吗？

标签： user-interface c++11 qml qtquick2 qtquickcontrols

【解决方案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" }
}

【讨论】：

他说这段代码在添加C++信号处理之前工作正常。所以，虽然这是一个很好的答案，但我认为如果不向问题添加更多信息，我们就无法真正完整地回答这个问题。
我通过删除示例来尝试他的代码，并在他会调用他的插槽的地方简单地打印“hello”。这甚至都不起作用，所以我坚信这是问题的一部分。

【解决方案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" }
                             }
                         }
                     }
                 }

【讨论】：

【解决方案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" }
           }
         }
       }
     }
   }

【讨论】：

【解决方案4】：

GradientStop position 必须介于 0.0 和 1.0

之间

【讨论】：

我试过了，但它不起作用。边框颜色和半径、信号、插槽除此之外一切正常。