Repeater Delegate 无法访问列表模型中的属性

Question

从此链接描述了

Repeater

问题。

@Stephen Quan，根据您的建议将代码修改为

ListModel

。

ListModel {
     id:listModel 
}

function handleModelChanged() {
    delegateModel.model = areaViewModel;
    const newUiType = areaViewModel.uiType;

    if (newUiType !== uiType || !modelDataIsEqual(delegateModel, listModel) ) { 
        listModel.clear();
        dlaButtonStyle = areaModel.combineBtnStyle;
        oddEvenBtnAppearance = areaModel.getLockedButtonAppearance();

        for (var row = 0; row < delegateModel.model.rowCount(); row++) {
            var item = delegateModel.items.get(row).model;
            var button = dataModelItemToButton(item);                 
            listModel.append(button);
        } 
        
        console.log(listModel.get(0).dataAreaName);
        uiType = newUiType;
    } else {
        console.log("GRID buttons are same")
    }
}

Repeater {
    id: areaRepeater
    model: listModel

    delegate: {
        gridButton;
    }
    onItemAdded: {              
        if (index == areaRepeater.count - 1) {
            console.log("GRID repeater added " + areaRepeater.count + " buttons")
            updateItems()
        }
    }
}

但是，当在转发器中公开此列表模型时，我得到了此输出：

但是我们预期的结果是：

我认为委托中的项目属性设置不正确。我在代码中犯了错误的地方。请帮忙解决一下。

提前谢谢

Answer 1

从

Javascript model

切换到

ListModel

时，请注意您的委托绑定会从

modelData.property

更改为

model.property

甚至

property

。

这是一个演示如何填充

GridView

ListModel

的模型。请注意，您不需要不断地重新分配

GridView.model

，我们设置一次，之后，我们只需直接附加到

ListModel

:

import QtQuick
import QtQuick.Controls
Page {
    background: Rectangle { color: "black" }
    GridView {
        anchors.fill: parent
        model: ListModel { id: listModel }
        cellWidth: 100
        cellHeight: 100
        delegate: Item {
            width: 100
            height: 100
            Rectangle {
                anchors.fill: parent
                anchors.margins: 4
                border.color: "white"
                border.width: 2
                radius: 10
                color: "black"
                Text {
                    anchors.centerIn: parent
                    text: num
                    color: "white"
                    font.pointSize: 30
                    font.bold: true
                }
            }
        }
        ScrollBar.vertical: ScrollBar {
            width: 20
            policy: ScrollBar.AlwaysOn
        }
    }
    Timer {
        interval: 100
        running: listModel.count < 1000
        onTriggered: listModel.append( { num: listModel.count } )
    }
    footer: Frame {
        Text {
            text: "Count: %1".arg(listModel.count)
            color: "white"
        }
    }
}

您可以在线尝试！