3

我是 QML 的新手,在学习按钮教程时遇到了范围问题。我解决了它,但我不明白为什么代码一开始就不起作用:

问题

以下代码在按钮悬停时给出运行时引用错误:

main_broken.qml

    import QtQuick 2.0
    import QtQuick.Controls 1.1

    ApplicationWindow {
        visible: true
        width: 640
        height: 480
        title: qsTr("Button Tester")

        Rectangle {
                id: simpleButton
                height: 75
                width: 150
                property color buttonColor: "light blue"
                property color onHoverColor: "gold"
                property color borderColor: "white"

                onButtonClick: {
                        console.log(buttonLabel.text + " clicked")
                }

                signal buttonClick()



                Text {
                    id: buttonLabel
                    anchors.centerIn: parent
                    text: "button label"
                }

                MouseArea {
                    id: buttonMouseArea
                    anchors.fill: parent
                    onClicked: buttonClick()
                    hoverEnabled: true
                    onEntered: parent.border.color = onHoverColor
                    onExited: parent.border.color = borderColor
                }

                color: buttonMouseArea.pressed ? Qt.darker(buttonColor, 1.5) : buttonColor
                scale: buttonMouseArea.pressed ? 0.99 : 1
        }

    }

错误:

qrc:///main.qml:37: ReferenceError: onHoverColor is not defined
qrc:///main.qml:38: ReferenceError: borderColor is not defined
qrc:///main.qml:37: ReferenceError: onHoverColor is not defined
qrc:///main.qml:35: ReferenceError: buttonClick is not defined

解决方案

只需将属性绑定和信号槽移动到应用程序窗口对象中即可解决,如下所示:

main_fixed.qml

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Button Tester")

    property color buttonColor: "light blue"
    property color onHoverColor: "gold"
    property color borderColor: "white"

    onButtonClick: {
            console.log(buttonLabel.text + " clicked")
    }

    signal buttonClick()

    //etc

问题

为什么不能将属性绑定留在 ApplicationWindow 对象的 Rectangle 子对象中?

如果您想要仅具有矩形独有的属性(例如颜色),但使用了 ApplicationWindow 的某些属性(例如文本大小),该怎么办?


我是编码和堆栈溢出的新手(这是我的第一篇文章)。我试图以最清晰的方式提出我的问题,但是如果它不符合堆栈溢出的标准以及我必须做些什么来改变它,请告诉我。

4

1 回答 1

4

QML 中的作用域很简单,也许很奇怪,但很简单:

当您使用标识符时,假设foo在 var 绑定中,QML 引擎按以下顺序搜索:

  • 当前文件中的对象,其 ID 为foo
  • 全局范围内的对象主 QML 文件),其 ID 为foo
  • 当前对象中被调用的属性foo
  • 当前组件(当前文件)的根对象中被调用的属性foo

如果它没有找到它,它会抛出ReferenceError.

不,直接父母或孩子不在范围内。这可能看起来很奇怪,但这就是它的工作方式。

如果您需要引用一个超出范围的变量,只需在它之前使用一个 ID:如果对象被调用foo并且有一个名为 的属性bar,您可以foo.bar在文件中任何您不想要的地方引用。

希望能帮助到你。

于 2014-04-28T14:53:14.897 回答