QML嵌套ListView中通过JS添加内部列表元素报错求助

你遇到的TypeError: Cannot call method 'insert' of undefined错误，本质是你试图访问的listModel_in并没有和外部listModel的项关联起来。外部listModel里的每个项只存储了titre_txt，而内部的listModel_in是每个delegate实例里的独立对象，和外部模型的项没有绑定关系，所以直接通过listModel.get(numListe).listModel_in肯定拿不到它。

下面给你两种可行的解决方案：

方案一：数据与UI分离（推荐） #

把内部列表的数据作为外部listModel项的一部分存储，让内部ListView直接绑定到这份数据，这样操作数据就不用直接碰UI元素了，更符合QML的设计思路。

修改你的QML代码：

Item{
    id:list
    width: parent.width-210
    height: parent.height
    x:105
    Component{
        id:listDelegate
        Item {
            id:elem
            height: 100
            width: parent.width
            Item{
                id:titre_liste
                height: 50
                width: parent.width
                Text{
                    anchors.left: parent.left
                    color:"white"
                    text: titre_txt
                    font.pixelSize: 25
                    font.bold: false
                }
            }
            Item{
                id:listInList
                width: parent.width-100
                height: parent.height
                Component{
                    id:listInListDelegate
                    Item{
                        id:element_liste
                        height: parent.height
                        width: parent.width/5
                        Text{
                            anchors.left: parent.left
                            color:"white"
                            text: element_txt
                            font.pixelSize: 25
                            font.bold: true
                        }
                    }
                }
                ListView {
                    id: viewin
                    anchors.fill: parent
                    // 绑定到当前项的innerItems数组，用ListModel包装
                    model: ListModel{ objectList: innerItems }
                    delegate: listInListDelegate
                }
            }
        }
    }
    ListView {
        id: viewglobal
        anchors.fill: parent
        model: ListModel{
            id:listModel
        }
        delegate: listDelegate
    }
}

然后修改JS函数：

function addItem(){
    var i;
    var numListe = -1;
    var liste = "titre"
    var item = "item"
    for(i = 0;i < listModel.count;i++) {
        if(listModel.get(i).titre_txt === liste) {
            numListe = i;
            break; // 找到后直接跳出循环，优化性能
        }
    }
    if(numListe === -1)//if the list doesn't exist
    {
        // 新增项时同时初始化innerItems数组
        listModel.append({titre_txt:liste, innerItems: []});
        numListe = listModel.count-1;
    }
    // 获取当前项的innerItems数组，添加新元素
    var targetItem = listModel.get(numListe);
    targetItem.innerItems.unshift({element_txt:item});
    // 通知模型数据更新，触发UI刷新
    listModel.set(numListe, targetItem);
}

方案二：直接操作UI中的内部模型 #

如果你更倾向于直接操作UI元素，可以通过外部ListView的itemAt()方法找到对应索引的delegate实例，再从中获取内部的listModel_in：

修改你的JS函数：

function addItem(){
    var i;
    var numListe = -1;
    var liste = "titre"
    var item = "item"
    for(i = 0;i < listModel.count;i++) {
        if(listModel.get(i).titre_txt === liste) {
            numListe = i;
            break;
        }
    }
    if(numListe === -1)//if the list doesn't exist
    {
        listModel.append({titre_txt:liste});
        numListe = listModel.count-1;
        // 注意：新增项后需要等delegate实例创建完成才能访问，这里加个延迟确保渲染完成
        setTimeout(() => {
            addInnerItem(numListe, item);
        }, 0);
        return;
    }
    addInnerItem(numListe, item);
}

// 单独提取添加内部元素的函数，方便复用
function addInnerItem(listIndex, itemText) {
    // 获取外部ListView中对应索引的delegate实例
    var outerDelegate = viewglobal.itemAt(listIndex);
    if(outerDelegate) {
        // 从delegate实例中找到内部的listModel_in
        var innerModel = outerDelegate.listInList.viewin.model;
        innerModel.insert(0, {element_txt: itemText});
    }
}

注意：方案二中，新增外部项后不能立刻访问delegate，因为QML的UI渲染是异步的，所以需要用setTimeout或者监听ListView的onItemAdded信号来确保delegate已经创建完成。

总的来说，方案一更符合MVVM的设计思想，数据和UI分离，代码更易维护；方案二更直接，但依赖UI结构，后续如果UI布局改动可能需要调整代码。

内容的提问来源于stack exchange，提问作者Dosman