Question

我有一个基于QAbstractItemModel的树和一个用于显示其内容的qml TreeView。现在我想在左边有一个包含TreeView的两部分UI，在右边的模型中有一些输入表单用于不同的字段。输入字段应连接/映射到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做同样的事情，但它看起来像是一个黑客。你可以在这里看到：

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
}

Qml相当于QDataWidgetMapper

1 个答案: