数据不是为QML中的动态模型提取动态委托

时间:2016-05-12 16:36:24

标签: qml qqmlcomponent

我正面临使用Loaders加载动态模型动态委托的问题。我能够看到相应模型的委托,但该委托中的数据未显示。单击按钮时,将错误设置为“ReferenceError:”:name未定义“ 我在下面发布了完整的例子。任何人都可以建议我是否遗漏任何东西。

import QtQuick 2.3
import QtQuick.Window 2.2

Window {
    id: mainWindow

    property int value: 0
    property variant m_Model: modelData

    visible: true
    height: 600
    width: 700


    Row{
        id: mainButtons
        spacing: 5
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.margins: 6


        Rectangle{
            id: b1
            height: 50
            width: 90
            border.width: 1
            radius: 3
            color: "skyblue"
            Text{
                anchors.centerIn: parent
                text: "Button1"
            }
            MouseArea{
                anchors.fill: parent
                hoverEnabled: true
                onClicked:{
                    listView.model=button1Model
                    value=1
                }
            }
        }
        Rectangle{
            id: b2
            height: 50
            width: 90
            border.width: 1
            radius: 3
            color: "skyblue"
            Text{
                anchors.centerIn: parent
                text: "Button2"
            }
            MouseArea{
                anchors.fill: parent
                hoverEnabled: true

                onClicked: {
                    listView.model=button2Model
                    //listView.delegate=b2Delegate
                    //loader.sourceComponent=b2Delegate
                    value=2
                }
            }
        }
        Rectangle{
            id: b3
            height: 50
            width: 90
            border.width: 1
            radius: 3
            color: "skyblue"
            Text{
                anchors.centerIn: parent
                text: "Button3"
            }
            MouseArea{
                anchors.fill: parent
                hoverEnabled: true

                onClicked: {
                    listView.model=button3Model
                    value = 3
                }
            }
        }
    }

    ListView{
        id: listView

        anchors.top: mainButtons.bottom
        anchors.left:parent.left
        anchors.margins: 3

        height: 500
        width: 600

        model: modelData

        delegate: Component{
            id: loader
            Loader{
                id: loader

                sourceComponent: {
                    switch(value)
                    {
                    case 1: {
                        return b1Delegate
                    }
                    case 2:{
                        return b2Delegate
                    }
                    case 3:{
                        return b3Delegate
                    }
                    default:
                        return listDelegate

                    }

                }
            }
        }
    }

    Component{
        id: listDelegate
        Row{

            spacing: 5
            Rectangle{
                width: 100
                height: 50
                border.width: 1
                Text{
                    anchors.centerIn: parent
                    text: name
                }
            }

            Rectangle{
                width: 100
                height: 50
                radius: 50
                border.width: 1
                Text{
                    anchors.centerIn: parent
                    text: number
                }
            }
        }

    }


    ListModel{
        id: modelData

        ListElement{
            name: "abc"
            number: "1"
        }
        ListElement{
            name: "def"
            number: "2"
        }
        ListElement{
            name: "ghi"
            number: "3"
        }
        ListElement{
            name: "jkl"
            number: "4"
        }
    }

    Component{
        id: b1Delegate

        Row{
            spacing: 5
            anchors.margins: 5

            Rectangle{
                height: 50
                width: 100
                border.width: 1
                Text{
                    anchors.centerIn: parent
                    text: SerialNO
                }

            }
            Rectangle{
                height: 50
                width: 100
                border.width: 1
                Text{
                    anchors.centerIn: parent
                    text: Name
                }

            }
            Rectangle{
                height: 50
                width: 100
                border.width: 1
                Text{
                    anchors.centerIn: parent
                    text: Marks
                }

            }
        }
    }

    ListModel{
        id: button1Model
        ListElement{
            SerialNO: "1"
            Name: "Mathametics"
            Marks: "100"
        }
        ListElement{
            SerialNO: "2"
            Name: "Science"
            Marks: "75"
        }
        ListElement{
            SerialNO: "3"
            Name: "Social"
            Marks: "80"
        }
        ListElement{
            SerialNO: "4"
            Name: "Hindi"
            Marks: "80"
        }
        ListElement{
            SerialNO: "5"
            Name: "English"
            Marks: "75"
        }

    }

    ListModel{
        id: button2Model
        ListElement{
            Name: "ABC"
        }
        ListElement{
            Name: "XYZ"
        }
        ListElement{
            Name: "PQR"
        }
        ListElement{
            Name: "IJK"
        }
    }
    ListModel{
        id: button3Model
        ListElement{
            University: "AAAAAA"
            Address: "111111"
        }
        ListElement{
            University: "BBBBBB"
            Address: "111111"
        }
        ListElement{
            University: "CCCCCC"
            Address: "111111"
        }
        ListElement{
            University: "DDDDDD"
            Address: "111111"
        }
    }

    Component
    {
        id: b2Delegate
        Row{
            spacing: 5
            anchors.margins: 5
            Rectangle{
                height: 50
                width: 100
                border.width: 1
                Text{
                    anchors.centerIn: parent
                    text: Name
                }

            }
        }
    }

    Component
    {
        id: b3Delegate
        Row{
            spacing: 5
            anchors.margins: 5

            Rectangle{
                height: 50
                width: 100
                border.width: 1
                Text{
                    anchors.centerIn: parent
                    text: University
                }

            }
            Rectangle{
                height: 50
                width: 100
                border.width: 1
                Text{
                    anchors.centerIn: parent
                    text: Address
                }

            }
        }
    }
}

2 个答案:

答案 0 :(得分:1)

我认为在设置Loader时使用delegate并不是一个好主意。尝试更改此内容:

delegate: Component{
    id: loader
    Loader{
        id: loader

        sourceComponent: {
            switch(value)
            {
            case 1: {
                return b1Delegate
            }
            case 2:{
                return b2Delegate
            }
            case 3:{
                return b3Delegate
            }
            default:
                return listDelegate

            }

        }
    }
}

对此:

delegate: {
    switch(value)
    {
    case 1: {
        return b1Delegate
    }
    case 2:{
        return b2Delegate
    }
    case 3:{
        return b3Delegate
    }
    default:
        return listDelegate
    }
}

如果这对您没有帮助,请编辑您的答案并附上完整的示例代码。您提供的示例包含错误,我不知道由于示例太短而发生了哪些错误,而且实际上是错误。

答案 1 :(得分:0)

需要使模型中的数据对委托的范围可见。您可以在similar way as Qt Quick Controls does it

中执行此操作
delegate: Loader {
    property string nameData: name
    property int numberData: number

    sourceComponent: {
        switch (value) {
        case 1:
            return b1Delegate
        case 2:
            return b2Delegate
        case 3:
            return b3Delegate
        default:
            return listDelegate
        }
    }
}

然后,listDelegate将成为:

Component {
    id: listDelegate
    Row {
        spacing: 5

        Rectangle {
            width: 100
            height: 50
            border.width: 1
            Text {
                anchors.centerIn: parent
                text: nameData
            }
        }

        Rectangle {
            width: 100
            height: 50
            radius: 50
            border.width: 1
            Text {
                anchors.centerIn: parent
                text: numberData
            }
        }
    }
}

这是正确的代码(我简化了一些代码):

import QtQuick 2.3
import QtQuick.Window 2.2

Window {
    id: mainWindow

    property int value: 0
    property variant m_Model: modelData

    visible: true
    height: 600
    width: 700

    Row {
        id: mainButtons
        spacing: 5
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.margins: 6

        Rectangle {
            id: b1
            height: 50
            width: 90
            border.width: 1
            radius: 3
            color: "skyblue"
            Text {
                anchors.centerIn: parent
                text: "Button1"
            }
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onClicked: {
                    listView.model = button1Model
                    value = 1
                }
            }
        }
        Rectangle {
            id: b2
            height: 50
            width: 90
            border.width: 1
            radius: 3
            color: "skyblue"
            Text {
                anchors.centerIn: parent
                text: "Button2"
            }
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true

                onClicked: {
                    listView.model = button2Model
                    //listView.delegate=b2Delegate
                    //loader.sourceComponent=b2Delegate
                    value = 2
                }
            }
        }
        Rectangle {
            id: b3
            height: 50
            width: 90
            border.width: 1
            radius: 3
            color: "skyblue"
            Text {
                anchors.centerIn: parent
                text: "Button3"
            }
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true

                onClicked: {
                    listView.model = button3Model
                    value = 3
                }
            }
        }
    }

    ListView {
        id: listView

        anchors.top: mainButtons.bottom
        anchors.left: parent.left
        anchors.margins: 3

        height: 500
        width: 600

        model: modelData

        delegate: Loader {
            property string nameData: name
            property int numberData: number

            sourceComponent: {
                switch (value) {
                case 1:
                    return b1Delegate
                case 2:
                    return b2Delegate
                case 3:
                    return b3Delegate
                default:
                    return listDelegate
                }
            }
        }
    }

    Component {
        id: listDelegate
        Row {
            spacing: 5

            Rectangle {
                width: 100
                height: 50
                border.width: 1
                Text {
                    anchors.centerIn: parent
                    text: nameData
                }
            }

            Rectangle {
                width: 100
                height: 50
                radius: 50
                border.width: 1
                Text {
                    anchors.centerIn: parent
                    text: numberData
                }
            }
        }
    }

    ListModel {
        id: modelData

        ListElement {
            name: "abc"
            number: "1"
        }
        ListElement {
            name: "def"
            number: "2"
        }
        ListElement {
            name: "ghi"
            number: "3"
        }
        ListElement {
            name: "jkl"
            number: "4"
        }
    }

    Component {
        id: b1Delegate

        Row {
            spacing: 5
            anchors.margins: 5

            Rectangle {
                height: 50
                width: 100
                border.width: 1
                Text {
                    anchors.centerIn: parent
                    text: SerialNO
                }
            }
            Rectangle {
                height: 50
                width: 100
                border.width: 1
                Text {
                    anchors.centerIn: parent
                    text: Name
                }
            }
            Rectangle {
                height: 50
                width: 100
                border.width: 1
                Text {
                    anchors.centerIn: parent
                    text: Marks
                }
            }
        }
    }

    ListModel {
        id: button1Model
        ListElement {
            SerialNO: "1"
            Name: "Mathametics"
            Marks: "100"
        }
        ListElement {
            SerialNO: "2"
            Name: "Science"
            Marks: "75"
        }
        ListElement {
            SerialNO: "3"
            Name: "Social"
            Marks: "80"
        }
        ListElement {
            SerialNO: "4"
            Name: "Hindi"
            Marks: "80"
        }
        ListElement {
            SerialNO: "5"
            Name: "English"
            Marks: "75"
        }
    }

    ListModel {
        id: button2Model
        ListElement {
            Name: "ABC"
        }
        ListElement {
            Name: "XYZ"
        }
        ListElement {
            Name: "PQR"
        }
        ListElement {
            Name: "IJK"
        }
    }
    ListModel {
        id: button3Model
        ListElement {
            University: "AAAAAA"
            Address: "111111"
        }
        ListElement {
            University: "BBBBBB"
            Address: "111111"
        }
        ListElement {
            University: "CCCCCC"
            Address: "111111"
        }
        ListElement {
            University: "DDDDDD"
            Address: "111111"
        }
    }

    Component {
        id: b2Delegate
        Row {
            spacing: 5
            anchors.margins: 5
            Rectangle {
                height: 50
                width: 100
                border.width: 1
                Text {
                    anchors.centerIn: parent
                    text: Name
                }
            }
        }
    }

    Component {
        id: b3Delegate
        Row {
            spacing: 5
            anchors.margins: 5

            Rectangle {
                height: 50
                width: 100
                border.width: 1
                Text {
                    anchors.centerIn: parent
                    text: University
                }
            }
            Rectangle {
                height: 50
                width: 100
                border.width: 1
                Text {
                    anchors.centerIn: parent
                    text: Address
                }
            }
        }
    }
}