Qt Quick实现编码与姓名关联存储及跨页面交互方案咨询

核心实现思路 #

使用ListModel作为统一数据源存储编码与姓名的关联数据，让PageA和PageB共享该模型，实现数据的同步更新与调用：

• ListModel包含code（人员编码）和name（人员姓名）两个字段
• PageA负责数据的新增与删除操作，操作直接作用于ListModel
• 两个页面的ComboBox绑定到ListModel，通过角色（role）关联编码与姓名

修改后的PageA代码 #

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.VirtualKeyboard 2.14

Item {
    id: pageA
    width: 1920
    height: 1080

    // 定义共享的人员数据模型，可放在全局或父组件中供PageB访问
    ListModel {
        id: personModel
        // 可添加预存示例数据（可选）
        // ListElement { code: "001"; name: "张三" }
    }

    TextField{
        id: code
        y: 0
        width: 200
        height: 50
        placeholderText: qsTr("输入人员编码")
    }

    TextField{
        id: name
        x: 0
        y: 65
        width: 200
        height: 50
        placeholderText: qsTr("输入人员姓名")
    }

    // 用于选择删除项的ComboBox
    ComboBox{
        id: selectionForDelete
        x: 320
        y: 65
        width: 200
        height: 50
        // 绑定数据模型，显示编码
        model: personModel
        textRole: "code"
    }

    Button{
        id: adding
        x: 29
        y:155
        text: "添加"
        onClicked: {
            // 验证输入不为空
            if (code.text.trim() !== "" && name.text.trim() !== "") {
                // 向模型添加新数据
                personModel.append({
                    "code": code.text.trim(),
                    "name": name.text.trim()
                })
                // 清空输入框
                code.clear()
                name.clear()
            }
        }
    }

    Button{
        id: deleting
        x: 355
        y: 155
        text: "删除"
        onClicked: {
            // 删除选中的项
            if (selectionForDelete.currentIndex !== -1) {
                personModel.remove(selectionForDelete.currentIndex)
            }
        }
    }
}

修改后的PageB代码 #

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.VirtualKeyboard 2.14

Item {
    id: pageB
    width: 1920
    height: 1080

    // 接收从父组件或全局上下文传递的共享模型
    property ListModel personModel

    ComboBox{
        id: codeList
        width: 200
        height: 50
        // 绑定共享模型，显示编码
        model: personModel
        textRole: "code"
    }

    Text {
        id: relatedName
        y:70
        // 根据选中的编码，同步显示对应姓名
        text: codeList.currentIndex !== -1 ? personModel.get(codeList.currentIndex).name : qsTr("请选择人员编码")
    }
}

注意事项 #

• 确保personModel在两个页面的上下文都可访问：可以将其定义在父容器（如StackView的根组件）中，或通过property传递给PageB
• 添加操作时建议增加重复编码的校验逻辑，避免数据重复
• 删除操作可增加二次确认提示，防止误删

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