Question

我正在尝试通过包含的JavaScript函数访问包含的QML ID。我收到错误：

Reference error: textItem is not defined.

main.qml

import QtQuick 2.1
import "functions.js" as Logic

Rectangle {
    anchors.fill: parent;
    Button { }
    MouseArea {
        onClicked: Logic.changeText()
    }
}

Button.qml

import QtQuick 2.1

Rectangle  {
    width: 100; height: 30
    color: "black"

    Text  {
        id: textItem
        anchors.centerIn: parent
        font.pointSize: 20
        color: "white"
        text: "Hello!"
    }

}

functions.js

function changeText() {
    textItem.text = "Goodbye!";
}

有没有办法从导入的JS文件访问导入的QML的id范围？

Answer 1

正如folibis所说，textItem无法访问functions.js。但是，您的代码存在更多问题。要更改其文本的按钮没有ID，因此即使您愿意，也无法更改其文本。

为按钮指定ID，然后将按钮传递给changeText()：

import QtQuick 2.1
import "functions.js" as Logic

Rectangle {
    anchors.fill: parent;
    Button {
        id: button
    }
    MouseArea {
        onClicked: Logic.changeText(button)
    }
}

下一个问题是您的Button类型没有公开文本属性。您应该为textItem的属性设置别名：

import QtQuick 2.1

Rectangle  {
    width: 100; height: 30
    color: "black"

    property alias text: textItem.text

    Text  {
        id: textItem
        anchors.centerIn: parent
        font.pointSize: 20
        color: "white"
        text: "Hello!"
    }

}

然后剩下的就行了：

function changeText(button) {
    button.text = "Goodbye!";
}

Answer 2

为了从其他文件（或QML文件中）引用某些内容，您需要考虑QML树（使用 id 属性在树中导航）。话虽如此，我建议进行以下更改：

import QtQuick 2.1
import "functions.js" as Logic

Rectangle {
    id: rootRec
    anchors.fill: parent;
    Button {id: myButton}
    MouseArea {
        onClicked: Logic.changeText(myButton)
    }
}

在Button.qml中：

import QtQuick 2.1
Rectangle  {
    id: rootRec
    width: 100; height: 30
    color: "black"
    property string text: "Hello"

    Text  {
        id: textItem
        anchors.centerIn: parent
        font.pointSize: 20
        color: "white"
        text: rootRec.text
    }
}

在“function.js”中，您可以像这样引用它：

function changeText（buttonId）{ buttonId.text =“再见！”; }

从Imported JS访问导入的QML组件ID

2 个答案: