组合框的 QML 嵌套列表模型

Question

我想使用 comboBox，它的模型取自嵌套模型。

简化代码：

main.qml:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    id: applicationWindow

    width: 300
    height: 200
    visible: true
    title: qsTr("01_Change_Model_Data")

    ListModel {
        id: listModel1
        ListElement {
            labelText: "ComboBox 1:"

            //subItems: ["First", "Second", "Third"]
            subItems: [
                ListElement {text: "First"},
                ListElement {text: "Second"},
                ListElement {text: "Third"}
            ]

        }
        ListElement {
            labelText: "ComboBox 2:"

            //subItems: ["First", "Second", "Third"]
            subItems: [
                ListElement {text: "First"},
                ListElement {text: "Second"},
                ListElement {text: "Third"}
            ]

        }
    }


    Button {
        id: loadUnloadBtn
        height: 24
        width: 50
        text: "Load"

        anchors {
            right: parent.right
            rightMargin: 20
            top: parent.top
            topMargin: 10
        }
        onClicked: {
            if(comboBoxAreaLoader.source == "") {
                comboBoxAreaLoader.source = "ComboBoxArea.qml"
            }else {
                comboBoxAreaLoader.source = ""
            }

        }
    }

    Loader {
        id: comboBoxAreaLoader
        anchors {
            top: parent.top
            topMargin: 10
            bottom: parent.bottom
            bottomMargin: 10
            left: parent.left
            leftMargin: 10
            right: parent.right
            rightMargin: 80
        }
        source: ""
        property variant comboBoxModel: subItems
        onStatusChanged: if(status == Loader.Ready) comboBoxModelAlias = comboBoxModel
    }
}

ComboBoxArea.qml:

import QtQuick 2.15
import QtQuick.Controls 2.15


Item {
    id: listViewDelegate
    ListView {
        id: listView1
        anchors.fill: parent

        model: listModel1
        delegate: listElementDelegate
        spacing: 6
    }

    Component {
        id: listElementDelegate
        Rectangle {
            id: delegateRectangleRoot

            property alias comboBoxModelAlias: comboBox.model

            height: 30
            width: 200
            Label {
                id: comboBoxNameLabel
                color: "red"
                width: 80
                height: 30
                anchors {
                    left: parent.left
                    leftMargin: 10
                }
                text: labelText
                verticalAlignment: Text.AlignVCenter
            }

            ComboBox {
                id: comboBox
                height: 30
                width: 100
                //model: ["First", "Second", "Third"]

                anchors {
                    left: comboBoxNameLabel.right
                    leftMargin: 10
                    verticalCenter: comboBoxNameLabel.verticalCenter
                }
            }

        }

    }
}

我认为主要问题是在嵌套列表中定义子项。首先，我尝试将其声明为 js 列表，如：

subItems: ["First", "Second", "Third"]

但是我得到一个错误：

ListElement: cannot use script for property value

然后我尝试用listElements改变它：

subitems: [
    ListElement {text: "First"},
    ListElement {text: "Second"},
    ListElement {text: "Third"}
]

这次我有两个错误：

ReferenceError: subItems is not defined

Error: Invalid write to global property "comboBoxModelAlias"

其实我很困惑。你知道我做错了什么吗？

Application window screenshot

Answer 1

我认为你只是让它变得比需要的复杂一点。通过像下面这样声明子项，它们会自动成为 ListModels。您可以像 labelText.

一样在委托中引用它们

main.qml:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    id: applicationWindow

    width: 300
    height: 200
    visible: true
    title: qsTr("01_Change_Model_Data")

    ListModel {
        id: listModel1
        ListElement {
            labelText: "ComboBox 1:"

            subItems: [
                ListElement {text: "First"},
                ListElement {text: "Second"},
                ListElement {text: "Third"}
            ]

        }
        ListElement {
            labelText: "ComboBox 2:"

            subItems: [
                ListElement {text: "First"},
                ListElement {text: "Second"},
                ListElement {text: "Third"}
            ]

        }
    }


    Button {
        id: loadUnloadBtn
        height: 24
        width: 50
        text: "Load"

        anchors {
            right: parent.right
            rightMargin: 20
            top: parent.top
            topMargin: 10
        }
        onClicked: {
            if(comboBoxAreaLoader.source == "") {
                comboBoxAreaLoader.source = "ComboBoxArea.qml"
            }else {
                comboBoxAreaLoader.source = ""
            }

        }
    }

    Loader {
        id: comboBoxAreaLoader
        anchors {
            top: parent.top
            topMargin: 10
            bottom: parent.bottom
            bottomMargin: 10
            left: parent.left
            leftMargin: 10
            right: parent.right
            rightMargin: 80
        }
    }
}

ComboBoxArea.qml:

import QtQuick 2.15
import QtQuick.Controls 2.15


Item {
    id: listViewDelegate
    ListView {
        id: listView1
        anchors.fill: parent

        model: listModel1
        delegate: listElementDelegate
        spacing: 6
    }

    Component {
        id: listElementDelegate
        Rectangle {
            id: delegateRectangleRoot

            height: 30
            width: 200
            Label {
                id: comboBoxNameLabel
                color: "red"
                width: 80
                height: 30
                anchors {
                    left: parent.left
                    leftMargin: 10
                }
                text: labelText
                verticalAlignment: Text.AlignVCenter
            }

            ComboBox {
                id: comboBox
                height: 30
                width: 100
                model: subItems

                anchors {
                    left: comboBoxNameLabel.right
                    leftMargin: 10
                    verticalCenter: comboBoxNameLabel.verticalCenter
                }
            }

        }

    }
}

组合框的 QML 嵌套列表模型

QML Nested ListModel For ComboBox

qt

qml

qtquick2