创建前对组件的引用

时间:2018-02-09 15:05:24

标签: qt qml referenceerror qtquickcontrols2

我有一个TableView个对象,它由四个TableViewColumn个对象组成。

TableView {
        id: tableConfig
        model: tableModel
        anchors.fill: parent

        TableViewColumn{
            role: "name"
            title: "Channels"
            width: tableConfig.width/ tableConfig.columnCount

        }
        TableViewColumn{
            id: usageCol
            title: "Type"
            delegate: usageComboDel
            width: tableConfig.width/tableConfig.columnCount
        }
        TableViewColumn{
            title: "Device"
            delegate: deviceTypeComboDel
            width: tableConfig.width/tableConfig.columnCount
        }
        TableViewColumn{
            id: pinClmn
            title: "PIN"
            delegate: pinComboDel
            width: tableConfig.width/tableConfig.columnCount
        }
    }

每个ViewColumn都使用自己的委托Component来呈现。在我的应用程序中,我希望根据用户在pinComboDel委托中的选择来更改usageComboDel(ComboBox)委托的模型。两位代表是:

Component {
        id: usageComboDel
        Item{
            anchors.fill: parent
            ComboBox {
                id: usageCombo
                model:
                    ListModel{
                    id: usageModel
                    ListElement { text: "PowerOut" }
                    ListElement { text: "AnalogOut" }
                    ListElement { text: "PwmOut" }
                    ListElement { text: "DigitalOut" }
                    ListElement { text: "BldcOut" }
                    ListElement { text: "AnalogIn" }
                    ListElement { text: "PwmIn" }
                    ListElement { text: "DigitalIn" }
                    ListElement { text: "Can" }
                }
                currentIndex: 0
                height: 16
                anchors.fill: parent
                onCurrentTextChanged: {
                    tableModel.setProperty(styleData.row,"use",currentText);
                }
            }
        }

    }
Component{
        id: pinComboDel
        Item{
            id: itemPinComboDel
            anchors.fill: parent
            ComboBox {
                id: pinCombo
                model: {if (usageCombo.currentText === "PowerOut") { modelPowerOut;}
                    else if (usageCombo.currentText === "AnalogOut") { modelAnalogOut;}
                    else if (usageCombo.currentText === "AnalogIn") { modelAnalogIn;}
                    else if (usageCombo.currentText === "PwmOut") { modelPwmOut; }
                    else if (usageCombo.currentText === "DigitalOut" || usageCombo.currentText === "BldcOut" || usageCombo.currentText === "DigitalIn") { modelDigitalBldc; }
                    else if (usageCombo.currentText === "PwmIn") { modelPwmIn; }
                    else if (usageCombo.currentText === "Can") { modelCan; }
                }
                height: 16
                anchors.fill: parent
                onCurrentTextChanged: {
                    tableModel.setProperty(styleData.row,"pin",currentText);
                }
            }
            ListModel {
                id: modelPowerOut
                /* list elements */
            }
            ListModel {
                id: modelAnalogOut
                /* list elements */
            }
            ListModel {
                id: modelAnalogIn
                /* list elements */
            }
            ListModel {
                id: modelDigitalBldc
                /* list elements */
            }
            ListModel {
                id: modelPwmIn
                /* list elements */
            }
            ListModel {
                id: modelCan
                /* list elements */
            }

        }

    }

当我运行应用程序时,我得到了 ReferenceError: usageCombo is not defined ComboBox内的pinCombo

我认为造成这种情况的原因是,当我对Component{ ...}部分进行编码时,我只是声明一个组件的存在,就好像我会在一个单独的.qml文件中创建它一样。 然而,这并不意味着它被实例化。当用作ViewColumn的委托时,组件通过tableConfig View进行实例化。因此,pinComboDel 无法查看 usageComboDel索引与第一个,第二个不存在。

我会在创建之前将其命名为'对组件的引用'。

我想到但未尝试的一种可能的解决方案是,我可以为每个模型创建6个单独的委托。但是,出于一致性和效率的原因,我想避免这种情况并以正确的方式开发。

首先,我是否正确理解了问题?第二,因此这两个组件最终被实例化为代表,他们是否能够看到彼此?第三,这可能发生吗?或者我应该尝试以另一种方式开发它?

2 个答案:

答案 0 :(得分:0)

由于范围问题,您无法从外部访问代理。但是委托可以访问其父级,因此创建一些外部属性并将委托绑定到该属性是合乎逻辑的。例如:

Row {
    anchors.centerIn: parent
    Repeater {
        id: main
        model: 5
        property color clr: Qt.rgba(Math.random(),Math.random(),Math.random(),1)
        delegate: Rectangle {
            width: 50
            height: 50
            color: Qt.lighter(main.clr, 1.0 + index / 10)
            border { width: 1; color:"#999" }
            MouseArea {
                anchors.fill: parent
                cursorShape: Qt.PointingHandCursor
                onClicked: {
                    main.clr = Qt.rgba(Math.random(),Math.random(),Math.random(),1)
                }
            }
        }
    }
}

答案 1 :(得分:0)

我将delegate:属性直接填入TableViewColumn。我按照@folibis建议并为两列创建了一个属性并将它们绑定在一起。因此,当更改第一个代理时,第二个代理会更新。

TableViewColumn{
            id: usageCol
            title: "Type"
            property string modelName: "Power Out"
            delegate: ComboBox {
                id: usageCombo
                model:
                    ListModel{
                    id: usageModel
                    ListElement { text: "PowerOut" }
                    ListElement { text: "AnalogOut" }
                    ListElement { text: "PwmOut" }
                    ListElement { text: "DigitalOut" }
                    ListElement { text: "BldcOut" }
                    ListElement { text: "AnalogIn" }
                    ListElement { text: "PwmIn" }
                    ListElement { text: "DigitalIn" }
                    ListElement { text: "Can" }
                }
                currentIndex: 0
                height: 16
                anchors.fill: parent
                onCurrentTextChanged: {
                    tableModel.setProperty(styleData.row,"use",currentText);
                    usageCol.modelName = currentText;
                }
            }
            width: tableConfig.width/tableConfig.columnCount
        }
TableViewColumn{
            id: pinCol
            title: "PIN"
            property string modelName: usageCol.modelName
            delegate: ComboBox {
                id: pinCombo
                model: {if (pinCol.modelName === "PowerOut") { modelPowerOut;}
                    else if (pinCol.modelName === "AnalogOut") { modelAnalogOut;}
                    else if (pinCol.modelName === "AnalogIn") { modelAnalogIn;}
                    else if (pinCol.modelName === "PwmOut") { modelPwmOut; }
                    else if (pinCol.modelName === "DigitalOut" || pinCol.modelName === "BldcOut" || pinCol.modelName === "DigitalIn") { modelDigitalBldc; }
                    else if (pinCol.modelName === "PwmIn") { modelPwmIn; }
                    else if (pinCol.modelName === "Can") { modelCan; }
                }
                height: 16
                anchors.fill: parent
                onCurrentTextChanged: {
                    tableModel.setProperty(styleData.row,"pin",currentText);
                }
            }
            width: tableConfig.width/tableConfig.columnCount
        }