Qml 等效于 QDataWidgetMapper

Question

我有一个基于 QAbstractItemModel 的 Tree 和一个 qml TreeView 来显示其内容。现在我想要一个由两部分组成的 UI，左侧是 TreeView，右侧是模型中不同字段的一些输入表单。输入字段应连接/映射到 TreeView 中的当前/选定项。

在传统的基于 QtWidget 的代码中，我为此使用了 QDataWidgetMapper，它工作得相当好（现在在 Qt5 中看起来更好）。

作为第一个原型，我使用了两个 ListView，将秒 delegate.height 设置为 listView 的高度并自动滚动它。

ListView {
    id: listView2
    x: 300
    y: 146
    width: 263
    height: 160
    interactive: false
    flickableDirection: Flickable.VerticalFlick
    boundsBehavior: Flickable.StopAtBounds
    snapMode: ListView.SnapOneItem
    clip: true
    currentIndex: core.product.index
    //highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
    focus: true
    delegate: Item {
        width: parent.width
        height: listView2.height
        Row {
            id: row2
            spacing: 10

            Text {
                text: name
                anchors.verticalCenter: parent.verticalCenter
                font.bold: true
            }

            Text {
                text: type
                anchors.verticalCenter: parent.verticalCenter
                font.bold: true
            }

            Loader {
                source: {
                    if (model.type == "SingleGrasp") {
                        "SingleGrasp.qml"
                    } else {
                        "MultGraspTrans.qml"
                    }
                }
            }
        }
    }
    model: core.product.graspModel
}

现在我正在考虑对 TreeView 做同样的事情，但它看起来像一个 hack。你可以在这里看到：

TreeView {
    id: leafView
    x: 300
    y: 146
    width: 263
    height: 160
    clip: true
    focus: true
    TableViewColumn {
        title: "Name"
        role: "name"
    }
    style: TreeViewStyle {
        branchDelegate: Item {}
        indentation: 0
    }

    rowDelegate: Item {
        height: styleData.selected ? leafView.height * 0.99 : 0
    }
    itemDelegate: Item {
        visible: styleData.selected
        x: 5
        width: parent.width
        height: leafView.height
        Row {
            id: row12
            spacing: 10

            Text {
                text: model.name
                anchors.verticalCenter: parent.verticalCenter
                font.bold: true
            }

            Text {
                text: model.type
                anchors.verticalCenter: parent.verticalCenter
                font.bold: true
            }

            Loader {
                source: {
                    if (model.type == "SingleGrasp") {
                        "SingleGrasp.qml"
                    } else {
                        "MultGraspTrans.qml"
                    }
                }
            }
        }
    }
    headerDelegate: Item {}

    model: myModel
    selection: treeView1.selection
    //treeView1 has  selection: SelectionModel{model: myModel}

    function autoExpand(index ) {
        print(index)
        var oneUp = index

        do {

            print(oneUp)
            oneUp = oneUp.parent
            expand(oneUp)
            print("do")
            print(oneUp)
            //print(oneUp.isValid)
        } while (myModel.indexIsValid(oneUp));

    }

    Component.onCompleted: treeView1.selection.currentChanged.connect(autoExpand)
}

编写一个扁平化的 QAbstractProxyModel 将当前选定的项目映射到类似 QAbstractListModel 的模型会更合理吗？

Answer 1

我考虑过在 C++ 中通过 QSortFilterProxyModel 解决这个问题，但实际上有一个纯 QML 解决方案：

TreeView {
   id: myTreeView
   model: myModel
   selection: ItemSelectionModel{ model: myModel }
 }

DelegateModel {
    id: leafViewModel

    groups: [
        DelegateModelGroup {
            name: "current"
            includeByDefault: false
        }
    ]

    filterOnGroup: "current"

    model: myModel
    delegate: Flow{
        Text {
            text: model.name
        }
        TextField {
            id: normalTextField2
            text: model.name
            onEditingFinished: model.name = text
        }
    }
    property var currentIndex: myTreeView.selection.currentIndex

    property int prevIndex: 0

    onCurrentIndexChanged: {
        items.get(prevIndex).inCurrent = false
        rootIndex = currentIndex.parent
        items.get(currentIndex.row).inCurrent = true
        prevIndex = currentIndex.row
    }
}

ListView {
    model: leafViewModel
}