在转发器中显示隐藏组件 替代1 替代2 替代3 替代4

问题描述

我有一些下面的实例，这些实例正在通过加载的组件显示在中继器中。而且我正在尝试控制重复组件的可见性：

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

具有“直接”属性（无获取器，无设置器）

        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; })

这些作品都没有。 始终保持 holeComponent 的可见性。

还有其他方法吗？

====================== 编辑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

解决方法

我在互联网上发现了此黑客，并成功地将其应用于我的案例：

QML trick: force re-evaluation of a property binding

问题在于，qml仅在重新评估modelData时才重新评估model，只有在发生明显变化时，它才重新评估// 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;
        }
    }
}

和控制复选框的转发器：

ready=false; ready=true;

对于qml，const getParams = (id) => { fetch(getQueryPath+id) .then(response => response.json()) .then((jsonData) => { var paramCount = Object.keys(jsonData.options.parameters).length; return paramCount; }) .catch((error) => { console.error(error) }) } 是模型中的明显变化，因此qml重新评估了模型并正确地重新绘制了所有内容。