javascript - QML 在 Javascript 设置的属性上返回 NaN

Question

我在对象创建时使用 java 脚本设置 QML 对象的属性。 除了一个需要数字的参数外，它工作正常。

这会调用脚本:

Component.onCompleted: CreateVerticalGaugeScript.createVerticalGauge(300,10,300,300,"MAP",Dashboard,"MAP");

“MAP”前的 300 是需要的数字。其他一切正常。

var component;
var gauge;
function createVerticalGauge(setWidth,setX,setY,setMaxValue,setID,SetValueObject,SetValueProperty) {
    component = Qt.createComponent("verticalbargauge.qml");
    console.log(setMaxValue)
    if (component.status == Component.Ready)
        finishCreation(setWidth,setX,setY,setMaxValue,setID,SetValueObject,SetValueProperty);
    else
        component.statusChanged.connect(finishCreation);
}

    function finishCreation(setWidth,setX,setY,setMaxValue,setID,SetValueObject,SetValueProperty) {
        console.log(setMaxValue)
        if (component.status == Component.Ready) {
            gauge = component.createObject(adaptronicDash, {"id": setID, "gaugemaxvalue": setMaxValue,
                                               "gaugetext": Qt.binding(function(){return SetValueObject[SetValueProperty]}),
                                               "x": setX, "y": setY});
            gauge.width = setWidth;
            if (gauge == null) {
                // Error Handling
                //console.log("Error creating object");
            }
        } else if (component.status == Component.Error) {
            // Error Handling
            //console.log("Error loading component:", component.errorString());
        }
    }

现在创建对象时，它在 QML 中的值为 NaN。在 jas console.log 中显示值 300 已设置。

这是创建的 QML:

import QtQuick 2.8
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4
import QtQml.Models 2.2


Rectangle {
        id: initalID
        width: 100
        height: 80
        color: "transparent"
        antialiasing: false
        Drag.active: dragArea.drag.active

        property alias gaugetext: gaugetextfield.text
        property alias gaugemaxvalue: gauge.maximumValue

        MouseArea {
                  id: dragArea
                  width: parent.width
                  height: parent.height + 10 // easier to get
                  anchors.centerIn: parent
                  drag.target: parent
                  drag.axis: Drag.XAndYAxis
                  //onClicked: pieMenu.popup(mouseX, mouseY), console.log("clicked")
                }

        Gauge {
            id: gauge
            anchors.fill: parent
            anchors.margins: 10
            orientation : Qt.Horizontal
            minorTickmarkCount: 4
            tickmarkStepSize : 5000
            //labelStepSize: 50
            minimumValue: 0
            maximumValue: 10000

            //value: Dashboard.revs
            Behavior on value {
                NumberAnimation {
                    duration: 5
                }
            }
            Text {
                id: gaugetextfield
                font.pixelSize: (parent.height / 3)
                anchors.top : parent.top
                font.bold: true
                font.family: "Eurostile"
                color: "white"
                anchors.horizontalCenter: parent.horizontalCenter
            }
              style: GaugeStyle {
                valueBar: Rectangle {
                   implicitWidth:  rev.height /3
                    color: Qt.rgba(gauge.value / gauge.maximumValue, 0, 1 - gauge.value / gauge.maximumValue, 1)
                }
            }
      }
}

我使用属性别名 gaugemaxvalue 来访问该值。如果我直接在 Javascript 中设置一个数字，它就可以工作。

Answer 1

您将 Gauge maximumValue 设置为 300，tickmarkStepSize 为 5000。

通过将 maximumValue 更改为 30000 或注释掉 tickmarkStepSize 进行测试。