QML 组件范围之谜 [英] QML component scope puzzle

问题描述

获取此代码:

导入QtQuick 1.1长方形 {宽度:100身高:100属性颜色 fromColor: "red"属性颜色 toColor: "蓝色"渐变:渐变{属性颜色 fromColor: "yellow"属性颜色 toColor: "green"GradientStop { 位置:0;颜色:从颜色 }GradientStop { 位置:1；颜色:toColor }}}

Gradient 究竟为什么要从封闭元素中选择其 fromColor 和 toColor 属性?

这在哪里记录(至少在源代码注释中，在官方文档中更好)?

注意:这个QML 混淆示例来自 Girish Ramakrishnan 的演讲 Qt Quick Best Practices and Design Patterns (倒回到第 25 分钟)，他确实说这件事非常复杂，必须与组件范围有关，但没有时间解释原因.

[更新]

因此，正如 MartinJ 下文所述，元素属性(不仅是元素子)层次结构中的顶级组件的属性对所有属性可见，无论嵌套深度如何，优先级是该属性的属性，并且根本看不到中间"项目的所有属性.

这是一个小例子:

导入QtQuick 1.1物品 {物品 {属性字符串 s: "parent-str"项目 { Component.onCompleted: console.log(s) }}}

这给出:"ReferenceError: Can't find variable: s"

这按预期工作:

导入QtQuick 1.1物品 {属性字符串 s: "parent-str"项目 { Component.onCompleted: console.log(s) }}

，输出"parent-str".

请参阅下方 MartinJ 的评论.

解决方案

这个乍一看肯定不直观，但是把fromColor和toColor注释掉组件根项目和原因变得显而易见.从 QML Scope docs 可以看到范围包括:p>

• 在组件中定义的所有 id.
• 本地属性
• 组件根对象的属性

上面示例中的 GradientStop {} 没有定义本地属性.根组件确实如此，它们是 fromColor 和 toColor 解析到的属性.Gradient {} 中的属性根本不在 GradientStop {} 的范围内.

Take this code:

import QtQuick 1.1

Rectangle {
    width:  100
    height: 100

    property color fromColor: "red"
    property color toColor:   "blue"

    gradient: Gradient {
        property color fromColor: "yellow"
        property color toColor:   "green"

        GradientStop { position: 0; color: fromColor }
        GradientStop { position: 1; color: toColor }
    }
}

Why exactly does the Gradient pick its fromColor and toColor properties from the enclosing element?

Where is this documented (at least within source code comments, better within the official docs)?

Note: this "QML obfuscation example is from Girish Ramakrishnan's talk Qt Quick Best Practices and Design Patterns (rewind to 25th minute), where he does say that the thing is extremely complicated and has to with component scope and like that, but has no time to explain why.

[UPDATE]

So, as MartinJ tells below, the top-level component in the element-property (not only element-child) hierarchy has its properties visible to all properties however deep nested, with the precedence being of that properties' properties, and all properties of "intermediate" items not seen at all.

Here's a small example:

import QtQuick 1.1

Item {
    Item {
        property string s: "parent-str"
        Item { Component.onCompleted: console.log(s) }
    }
}

This gives: "ReferenceError: Can't find variable: s"

And this works as expected:

import QtQuick 1.1

Item {
    property string s: "parent-str"
    Item { Component.onCompleted: console.log(s) }
}

, outputting "parent-str".

Please see MartinJ's comments below.

解决方案

This certainly doesn't look intuitive at first glance, but comment out fromColor and toColor in the component root item and the reason becomes apparent. From the QML Scope docs you can see that the scope includes:

• all of the id's defined within the Component.
• local properties
• the properties of the root object of the Component

A GradientStop {} in the example above has no local properties defined. The root component does, and they are the properties that fromColor and toColor resolve to. The properties in Gradient {} are not in the scope of the GradientStop {} at all.

这篇关于QML 组件范围之谜的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！