将ListModel的特定项绑定到组件

Question

我正在用HsQML构建一个应用程序。这是我第一次接触QML，这是我在Qt中的第二次工作，也是Haskell的第一个更大的项目，所以请原谅我的无知。

在UI中，我有一个TabView。第一个选项卡包含一个绑定到模型并显示项目列表的ListView。双击ListView中的项将打开一个新选项卡，其中包含一个组件，该组件正确地显示该项的详细信息(我的猜测是由于新选项卡从单击的列表项继承其上下文)。

现在，我的目标是打开一个选项卡，在其中为该模型创建一个新项。其思想是创建一个空白数据项(可选地将其添加到模型中)，并将其“加载”到用于编辑现有项的相同组件类型中。我浏览了QML的文档，甚至找不到任何相关的东西，这让我觉得这种方法是完全有缺陷的。

TabView {
    id : rootTabs

    Tab {
        ListView {
            model : AutoListModel {
                source : workflowModel // this is sort of HsQML specific, data comes as a list from Haskell
            }
            delegate : Rectangle {
                Text {
                    text : modelData.name
                }

                MouseArea {
                    anchors.fill : parent

                    // this part works because the new component inherits its modelData from the current context
                    // so the new tab has correct data
                    onDoubleClicked : {
                        rootTabs.addTab(modelData.name, Qt.createComponent("WorkflowView.qml"))
                        rootTabs.currentIndex = rootTabsCount - 1
                    }
                }
            }
        }

        Button {
            text : "Create workflow"

            // this is the part in question - how do I assign the newly appended data to comp?
            onClicked : {
                wModel.appendBlank()
                comp = Qt.createComponent("WorkflowView.qml")
                var tab = rootTabs.addTab("New workflow", comp)
                comp.statusChanged.connect(tabLoaded)
            }
        }
    }
}

WorkflowEdit.qml：

Rectangle {
    TextField {
        id : nameInput
        text : modelData.name
        Binding {
            target : modelData
            property : "name"
            value : nameInput.text
        }
    }
}

Answer 1

我想我有你要找的东西。这有点棘手，因为Tab本质上是加载器。这需要为Tab QML类型创建一个额外的属性，作为存储模型索引的地方。而且，由于制表符只是TabView的子类，所以可以将新选项卡父子化到TabView中，而不是使用addTab()方法。注意，对于我的模型，我使用了一个ListModel。

main.qml

import QtQuick 2.7
import QtQuick.Controls 1.4
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480

    TabView {
        id : rootTabs
        anchors.fill: parent

        ListModel {
            id: listModel
            ListElement { car: "Toyota" }
            ListElement { car: "Chevrolet" }
            ListElement { car: "Honda" }
            ListElement { car: "Daihatsu" }
            ListElement { car: "Ford" }
            ListElement { car: "Nissan" }
            ListElement { car: "Hyundai" }
            ListElement { car: "Acura" }
        }

        MyTab {
            title: "Default"

            Item {

                ListView {
                    id: listView
                    anchors { fill: parent; bottomMargin: 240 }
                    model : listModel

                    delegate : Rectangle {
                        width: parent.width
                        height: 40
                        Text {
                            text : car
                            color: "black"
                            font.pointSize: 20
                        }

                        MouseArea {
                            anchors.fill : parent
                            onDoubleClicked : {
                                var myTab = Qt.createComponent("MyTab.qml")
                                var workflow = Qt.createComponent("Workflow.qml")
                                myTab.createObject(rootTabs, { "title": car, "modelIndex": index, "sourceComponent": workflow });
                                rootTabs.currentIndex = rootTabs.count - 1
                            }
                        }
                    }
                }

                Button {
                    anchors {fill: parent; topMargin: 240 }
                    text : "Create workflow"

                    onClicked : {
                        listModel.append( { "car" : "New car" } )
                        var myTab = Qt.createComponent("MyTab.qml")
                        var workflow = Qt.createComponent("Workflow.qml")
                        myTab.createObject(rootTabs, { "title": "New Workflow", "modelIndex": listModel.count - 1 , "sourceComponent": workflow });
                    }
                }
            }
        }
    }
}

MyTab.qml

import QtQuick 2.0
import QtQuick.Controls 1.4

Tab {
    property int modelIndex
}

Workflow.qml

import QtQuick 2.0
import QtQuick.Controls 1.4

Rectangle {
    TextField {
        id : nameInput
        text : listModel.get(modelIndex).car
        onTextChanged: {
            // Update model using modelIndex. Observe updates in listview
            listModel.set(modelIndex, { "car" : text })
        }
    }
}

Answer 2

TabView::addTab返回一个Tab对象，它基本上是一个Loader对象。Loader::item是当前加载的对象。因此，解决方案是向选项卡添加一个新的空模型数据，如下所示(在Button：：onClicked中)：

var tab = ...
tab.loaded.connect(function () {tab.item.data = newModelData;}); // newModelData = wModel.appendBlank() ???

您应该将属性modelData显式地添加到WorkflowEdit.qml中：

Rectangle {
    property var data: modelData // create property data and assign the context variable modelData to it by default
    TextField {
        id : nameInput
        text : data === undefined ? "" : data.name
        Binding {
            target : data
            property : "name"
            value : nameInput.text
        }
    }
}