Как я могу изменить listModel списка, когда я нажимаю на кнопку?

Question

В моем коде я хочу изменить ListModel моего ListView, когда я нажимаю на кнопку.Мой код не работает, как я могу это исправить?

ApplicationWindow {
    id: window
    visible: true
    width: 640
    height: 480

    property bool typelist: false

    Component {
        id: l1
        ListModel{
            ListElement { test: "blue" }
        }
    }

    Component {
        id: l2
        ListModel{
            ListElement { test: "red" }
            ListElement { test: "blue" }
        }
    }

    Component {
        id: deleg
        Rectangle {
            width: parent.width
            height: 50
            color: test
        }
    }

    ListView {
        id: list
        width: parent.width
        height: parent.height * 0.75
        delegate: deleg
    }

    Button {
        width: parent.width
        height: parent.heigth * 0.25
        anchors.bottom: parent.bottom
        onClicked: {
            if(typelist == false) {
                list.model = Qt.createComponent(l1)
                typelist =! typelist
            }
            else {
                list.model = Qt.createComponent(l2)
                typelist =! typelist
            }
        }
    }
}

Когда я нажимаю, я получаю эту ошибку:

ReferenceError: тест не определен

Answer 1

Потому что вы используете неправильную функцию.

Qt.createComponent принимает URL-адрес в качестве параметра и возвращает новый Component. У вас уже есть Component, поэтому вам не нужна эта функция.

Вам нужно Component.createObject. Он создает экземпляр объекта из Component.

Ваш код становится

list.model = l1.createObject();

Обратите внимание, что вам не нужно использовать Component в вашем примере, если вы не возражаете против создания обеих моделей с самого начала:

ApplicationWindow {
    id: window
    visible: true
    width: 640
    height: 480

    property bool typelist : false

    ListModel{
        id: listModel1
        ListElement { test: "blue" }
    }

    ListModel{
        id: listModel2
        ListElement { test: "red" }
        ListElement { test: "blue" }
    }

    ListView {
        id: listView
        width: parent.width
        height: parent.height * 0.75
        model: typelist ? listModel1 : listModel2
        delegate: Rectangle{
            width: parent.width
            height: 50
            color: model.test
        }
    }

    Button {
        width: parent.width
        height: parent.heigth*0.25
        anchors.bottom:parent.bottom
        onClicked: typelist=!typelist
    }
}