QML 组件作用域拼图 [英] QML component scope puzzle

问题描述

拿这个代码:

导入QtQuick 1.1长方形 {宽度:100高度:100属性颜色 fromColor: "red"属性颜色 toColor: "blue"梯度:梯度{属性颜色 fromColor: "yellow"属性颜色 toColor: "green"GradientStop { 位置:0;颜色:fromColor }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你可以看到范围包括:>

• 在组件中定义的所有 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屋！