在转发器中显示隐藏组件

Question

我通过加载的组件在转发器中显示以下内容的一些实例。我正在尝试控制重复组件的 visibility:

property var modes : [new modeClass("Mode 1", "mode1", noteC1)];

function modeClass(name, representation, note) {
    var active = true;
    this.name = name;
    this.representation = representation;
    this.note = note;
    this.activated = true;

    Object.defineProperty(this, "activated", {
        get : function () {
            return active;
        },
        set : function (newActive) {
            active = newActive;
            if (!active)
                note.selected = false;
            this.dummy = active;
            console.log(name, this.dummy);
        },
        enumerable : true
    });

    this.dummy = active;
}

中继器：

// Repeater pour les notes des modes
Repeater {
    id : repModes
    model : modes 
    //delegate : holeComponent - via Loader, to specify the "note" to display
    Loader {
        id : loaderModes
        Binding {
            target : loaderModes.item
            property : "note"
            value : modes[model.index].note
        }
        Binding {
            target : loaderModes.item
            property : "visible"
            value : modes[model.index].activated
        }
        sourceComponent : holeComponent
    }
}

我正在通过一些复选框控制 modeClass 实例的 activated 属性。

我无法使可见性生效的属性-绑定。它仅适用于组件的 实例化 ，并且不会对属性更改做出反应。

我尝试了几种绑定方法：

备选方案 1

与属性与 getter 和 setter

        Binding {
            target : loaderModes.item
            property : "visible"
            value : modes[model.index].activated
        }

备选方案 2

用“直接”属性（没有getter，没有setter）

        Binding {
            target : loaderModes.item
            property : "visible"
            value : modes[model.index].dummy
        }

选项 3

采用“自下而上”的方法

    Loader {
        id : loaderModes
        ...
        property bool showhide: modes[model.index].activated
        //property bool showhide: modes[model.index].dummy
        sourceComponent : holeComponent
    }

并且在组件中：

Component {
    id : holeComponent

    Image {
        id : img
        property var note
        visible : showhide

选择 4

模型级别的工作：

Repeater {
    id : repModes
    model : modes.filter(function(m) { return m.activated; })
    //model : modes.filter(function(m) { return m.dummy; })

None 这些作品。 holeComponents 的可见性始终保持实例化时的可见性。

还有其他方法吗？

====================== 编辑 27/10：KISS 版本：

ColumnLayout {
    id : layConfig

    Repeater {
        model : modes
        delegate : CheckBox {
            id : chkConfig
            property var __mode : modes[model.index]
            Layout.alignment : Qt.AlignLeft | Qt.QtAlignBottom
            text : __mode.name + (__mode.activated ? "++" : "--")
            checked : __mode.activated;
            onClicked : {
                console.log("onClik",__mode.name,modelData.name);
                __mode.activated = !__mode.activated;
                console.log("mode.activated ==> ",__mode.activated);
                console.log("modelData.activated ==> ",modelData.activated);
            }
        }

    }
}

我希望单击复选框时，属性-绑定会自动更改复选框文本。它不是。我想这可能与 property var __mode : modes[model.index] 有关。我应该改用 modelData。但是使用 modelData 我无权访问更新的基础对象属性。所以它也不起作用。

日志输出：

Debug: onClik Mode 1 Mode 1
Debug: mode.activated ==>  **true**
Debug: modelData.activated ==>  **false**

Debug: onClik Mode 1 Mode 1
Debug: mode.activated ==>  false
Debug: modelData.activated ==>  false

Answer 1

我在互联网上发现了这个 hack，并成功地将其应用到我的案例中：

QML trick: force re-evaluation of a property binding

问题在于，qml 仅在 model 的 re-evaluation 上 re-evaluate modelData 执行仅当有 模型中的明显变化。因此，未检测到模型基础对象的变化。这就是我想要实现的目标。

所以破解基本上是：

中继器：

// Repeater pour les notes des modes
Repeater {
    id : repModes
    model : ready?getActivatedModes():[] // awful hack 
    //delegate : holeComponent - via Loader, to specify the "note" to display
    Loader {
        id : loaderModes
        Binding {
            target : loaderModes.item
            property : "note"
            value : modes[model.index].note
        sourceComponent : holeComponent
    }
}

控制复选框的中继器：

Repeater {
    model : __config 
    delegate : CheckBox {
        id : chkConfig
        property var __mode : __config[model.index]
        Layout.alignment : Qt.AlignLeft | Qt.QtAlignBottom
        text : __mode.name
        checked : __mode.activated // init only
        onClicked : {
            __mode.activated = !__mode.activated;
            ready= false; // awful trick to force the refresh
            ready= true;
        }
    }
}

对于 qml，ready=false; ready=true; 是模型中的一个明显变化，因此 qml re-evaluates 模型并正确重绘所有内容。

在转发器中显示隐藏组件

Show hide component in a repeater

qt

repeater

qml

property-binding

备选方案 1

备选方案 2

选项 3

选择 4