QML参考误差

Question

我有一个小的qml项目，我面临着qml组件引用的问题。因此，我试图从numberTimer中的startButton启动NumComponent.qml的main.qml。

main.qml

import QtQuick 2.7
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    NumComponent{} //my component written in NumComponent.qml

    Rectangle{
        id: startButton
        anchors.centerIn: parent
        height: parent.height * 0.2
        width: height
        color: "lightblue"

        MouseArea{
            anchors.fill: parent
            onClicked: {
                numberTimer.start();
            }
        }
    }
}

NumComponent.qml

import QtQuick 2.0

Rectangle {
    id: numberRect
    color: "red"
    height: parent.height * 0.4
    width: height

    Text{
        id: numberText
        anchors.centerIn: parent
        text: ""
    }
    Timer{
        id: numberTimer
        interval: 100
        repeat: true
        onTriggered: {
            numberText.text = Math.floor(Math.random() * 8);
        }
    }
}

我得到了以下错误："qrc:/main.qml:22: ReferenceError: numberRect未定义“

Answer 1

1. 在NumComponent中给main.qml一个id： NumComponent{ id: numComponent } //my组件用NumComponent.qml编写
2. 将onClicked处理程序更改为： numComponent.startTimer()；

另一种变体：

1. 在numberRect中添加一个属性别名： 属性别名赋时: numberTimer.running
2. 将onClicked处理程序的main更改为： numComponent.timed = !numComponent.timed；
3. 在根项中添加到NumComponent.qml中： 函数startTimer() { numberTimer.start()；}

现在你可以启动和停止你的计时器了。