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

GradientStop position 必须介于 0.0 和 1.0

之间

Answer 2

您添加到按钮的 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 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 位置不是问题，您可以使用相同的位置 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" }
                             }
                         }
                     }
                 }

QML - 渐变不起作用

QML - Gradient not working

user-interface

c++11

qtquick2

qtquickcontrols