QML技术问题：点击按钮跨文件追加项至ListModel并在StackView显示

这里提供两种常用的实现思路，可根据项目结构选择：

方法一：全局单例共享收藏模型 #

这种方式适合需要在多个组件中访问收藏数据的场景，无需层层传递模型引用。

1. 创建全局单例收藏模型 #

新建FavoriteModel.qml文件，定义为单例模式：

pragma Singleton
import QtQuick 2.15

ListModel {
    id: favoriteModel
    // 可按需添加初始测试数据
    ListElement { name: "默认收藏项" }
}

在项目的qmldir文件中注册该单例（确保qmldir文件被添加到项目资源中）：

singleton FavoriteModel 1.0 FavoriteModel.qml

2. 修改NameDelegate实现收藏逻辑 #

在NameDeleget.qml的按钮点击事件中，直接调用全局模型的append方法：

import QtQuick 2.15
import QtQuick.Controls 2.15

ItemDelegate {
    // 接收当前列表项的数据，根据你的ListView绑定方式，也可直接用model.name
    property var currentItemData

    Text {
        text: currentItemData.name
    }

    Button {
        anchors.right: parent.right
        text: "收藏"
        onClicked: {
            FavoriteModel.append({ name: currentItemData.name })
        }
    }
}

3. 实现favorite.qml页面展示收藏项 #

直接绑定全局单例模型，用ListView渲染：

import QtQuick 2.15
import QtQuick.Controls 2.15

Page {
    title: "我的收藏"

    ListView {
        anchors.fill: parent
        model: FavoriteModel
        delegate: ItemDelegate {
            text: name
        }
    }
}

4. 主页面集成逻辑 #

在主页面的ListView中使用自定义Delegate，并通过StackView跳转到收藏页面：

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    width: 640
    height: 480
    visible: true

    StackView {
        id: stackView
        anchors.fill: parent

        initialItem: Page {
            title: "主列表"

            ListView {
                anchors.fill: parent
                // 这里替换为你的源ListModel（来自listmodel.qml）
                model: ListModel {
                    ListElement { name: "张三" }
                    ListElement { name: "李四" }
                    ListElement { name: "王五" }
                }
                delegate: NameDeleget {
                    currentItemData: model
                }
            }

            Button {
                anchors.bottom: parent.bottom
                anchors.horizontalCenter: parent.horizontalCenter
                text: "查看收藏"
                onClicked: stackView.push("favorite.qml")
            }
        }
    }
}

方法二：父组件传递模型引用 #

如果不想使用全局单例，可通过属性传递的方式将收藏模型从主组件传递给Delegate和收藏页面，更符合组件间数据传递的常规逻辑。

1. 主页面定义收藏模型并传递 #

ApplicationWindow {
    width: 640
    height: 480
    visible: true

    // 主组件中定义收藏模型
    property ListModel favoriteModel: ListModel {
        ListElement { name: "默认收藏项" }
    }

    StackView {
        id: stackView
        anchors.fill: parent

        initialItem: Page {
            title: "主列表"

            ListView {
                anchors.fill: parent
                model: ListModel {
                    ListElement { name: "张三" }
                    ListElement { name: "李四" }
                    ListElement { name: "王五" }
                }
                delegate: NameDeleget {
                    currentItemData: model
                    // 将主组件的收藏模型传递给Delegate
                    favoriteModel: parent.parent.favoriteModel
                }
            }

            Button {
                anchors.bottom: parent.bottom
                anchors.horizontalCenter: parent.horizontalCenter
                text: "查看收藏"
                onClicked: {
                    // 跳转时将模型传递给收藏页面
                    stackView.push("favorite.qml", { favoriteModel: favoriteModel })
                }
            }
        }
    }
}

2. 修改NameDeleget接收模型 #

import QtQuick 2.15
import QtQuick.Controls 2.15

ItemDelegate {
    property var currentItemData
    property ListModel favoriteModel

    Text {
        text: currentItemData.name
    }

    Button {
        anchors.right: parent.right
        text: "收藏"
        onClicked: {
            favoriteModel.append({ name: currentItemData.name })
        }
    }
}

3. 修改favorite.qml接收模型 #

import QtQuick 2.15
import QtQuick.Controls 2.15

Page {
    title: "我的收藏"
    // 接收传递过来的收藏模型
    property ListModel favoriteModel

    ListView {
        anchors.fill: parent
        model: favoriteModel
        delegate: ItemDelegate {
            text: name
        }
    }
}

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