qml 2.12 使用表单显示两列每排可以点击弹出弹框

可以使用 ListView 和 DelegateModel 来实现这个功能。以下是一个简单的实现示例：

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Dialogs 1.3

Item {
    width: 400
    height: 400

    // 模拟数据
    ListModel {
        id: myModel
        ListElement { name: "张三"; age: 20 }
        ListElement { name: "李四"; age: 30 }
        ListElement { name: "王五"; age: 40 }
    }

    ListView {
        id: listView
        anchors.fill: parent
        model: DelegateModel {
            id: delegateModel
            model: myModel
            delegate: Rectangle {
                width: parent.width
                height: 50
                color: ListView.isCurrentItem ? "lightblue" : "white"

                // 显示数据
                Row {
                    Text { text: name }
                    Text { text: age }
                }

                // 点击弹出弹框
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        myDialog.nameInput.text = name
                        myDialog.ageInput.text = age
                        myDialog.open()
                    }
                }
            }
        }
    }

    // 弹框
    Dialog {
        id: myDialog
        title: "编辑"
        width: 200
        height: 150
        visible: false

        Column {
            TextField {
                id: nameInput
                placeholderText: "姓名"
            }
            TextField {
                id: ageInput
                placeholderText: "年龄"
            }

            Row {
                Button {
                    text: "保存"
                    onClicked: {
                        // 保存数据
                        delegateModel.items[listView.currentIndex].name = nameInput.text
                        delegateModel.items[listView.currentIndex].age = ageInput.text
                        myDialog.close()
                    }
                }
                Button {
                    text: "取消"
                    onClicked: {
                        myDialog.close()
                    }
                }
            }
        }
    }
}

这个例子中，我们使用了一个 ListModel 来模拟数据，然后使用 ListView 和 DelegateModel 来显示数据。每个 delegate 是一个 Rectangle，包含两个 Text 和一个 MouseArea。当点击 MouseArea 时，会弹出一个弹框，用于编辑当前项的数据。弹框中包含两个 TextField，用于编辑姓名和年龄。点击保存按钮时，会将修改后的数据保存回到模型中。