QML 范围:子对象中的属性绑定失败 [英] QML scope: property binding in child object failing

问题描述

我是 QML 的新手，在学习按钮教程时遇到了范围问题.我解决了它，但我不明白为什么代码首先不起作用:

I'm new to QML and ran into a scope problem while going a button tutorial. I solved it but I don't understand why the code didn't work in the first place:

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

The following code gives Runtime reference errors when the button is hovered over:

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

解决方案

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

Solution

Solved by just moving the property bindings and signal-slot into the Application window object as follows:

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 子对象中保留属性绑定?

Questions

Why is it not possible to leave the property bindings within the Rectangle child of the ApplicationWindow object?

如果您只想拥有矩形独有的属性(例如颜色)，但使用 ApplicationWindow 的某些属性(例如文本大小)怎么办?

What if you wanted to have properties exclusive only to the rectangle (e.g. colour), but that used some of the properties of the ApplicationWindow (e.g. text size)?

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

I am new to coding and stack overflow (this is my first post). I've tried to ask my question in the clearest way possible, but please let me know if it's not up to par with stack overflow's standards and what I must do to change it.

推荐答案

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

Scope in QML is easy, maybe weird, but easy :

当您使用标识符时，让我们在 var 绑定中说 foo，QML 引擎按此顺序搜索:

When you use an identifier, lets say foo in a var binding, QML engine search in this order :

• 当前文件中的对象，其ID为foo
• 全局范围(主QML文件)中的对象，其ID为foo
• 当前对象中的属性，名为foo
• 当前组件(当前文件)的根对象中的属性，名为foo

• an object in the current file that has foo as its ID
• an object in global scope (main QML file) that has foo as its ID
• a property in current object that is called foo
• a property in the root object of current component (current file) that is called foo

如果没有找到，则抛出ReferenceError.

If it does not find it, it throws ReferenceError.

不，直接父级或子级不在范围内.这看起来很奇怪，但这就是它的工作方式.

And no, immediate parent or child is not in the scope. That can seem weird, but that's the way it works.

如果您需要引用一个范围外的变量，只需在它之前使用一个 ID:如果对象名为 foo 并且具有名为 bar 的属性，您可以在文件中的任何位置引用 foo.bar.

If you need an out-of-scope variable to be referenced, just use an ID before it : if the object is called foo and has a property named bar, you can reference foo.bar wherever you wan't in the file.

希望有帮助.

这篇关于QML 范围:子对象中的属性绑定失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！