将 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。

ma​​in.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 是当前加载的对象。所以，解决方法是在tab中添加一个新的空模型数据如下（在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
        }
    }
}