將專案附加到另一個檔案中的串列模型中

我的問題是如何將來自另一個的專案附加listmodel.qml到ListModel另一個 qml 檔案中的另一個專案。里面
有一個按鈕ItemDelegate。NameDeleget.qml當我單擊該按鈕時，我想將名稱附加到ListModelin favorite.qml。
當我將其推入時，favorite.qml我StackView希望它顯示附加的專案。
任何知道如何做到這一點的人。

主頁.qml

import QtQuick 2.0
import QtQuick.Controls 2.12

ApplicationWIndow {
    id: root
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    
    ListView {
        anchors.fill: parent
        model: NameModel{}
        delegate: NameDeleget{}
    }
}

NameModel.qml

import QtQuick 2.0

ListModel {
    listElement {name:""; value:}
    listElement {name:""; value:}
    listElement {name:""; value:}
}

NameDeleget.qml

import QtQuick 2.0
import QtQuick.Controls 2.12

ItemDelegate {
    width: parent.width
    text: model.name
    RoundButton {
        id: btn
        anchos.right: parent.right
        onclicked: {
        // When the button is clciked I want to append the clciked name to the "favorite.qml"
    }
}

收藏夾.qml

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import Qt.labs.settings 1.1
import Qt.labs.settings 1.0

Item {
    ListView {
        id: listView
        anchors.fill: parent

        model: ListModel {
            id: dataModel
            ListElement {name: "test1"; value: 1}
        }

        delegate: ItemDelegate {
            id: itemDelegete
            width: parent.width
            text: name  ":"  value
        }
    }
}

uj5u.com熱心網友回復：

我將您的要求解釋為：

• 在 HomePage.qml 上查看包含名稱的 ListModel 并選擇您的收藏夾
• 在 FavouritePage.qml 查看相同的 ListModel 但只顯示選定的收藏夾
• 使用 StackView 在兩個頁面之間導航

所以，要做到這一點：

• 我忽略了兩個 ListModel 的要求，因為只需要一個 ListModel
• 在父范圍內宣告 ListModel 以便兩個頁面都可以看到它
• 在第二頁使用 DelegateModel 過濾記錄

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15

Page {
    StackView {
        id: stackView
        anchors.fill: parent
        initialItem: "HomePage.qml"
    }
    ListModel {
        id: nameModel
        ListElement { name: "Steve Jobs"; fav: false }
        ListElement { name: "Bill Gates"; fav: false }
        ListElement { name: "Jeff Bezos"; fav: false }
    }
}

//HomePage.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
Page {
    header: Frame {
        background: Rectangle { color: "lightgrey" }
        Text {
            text: "HomePage.qml (%1 total)".arg(nameModel.count)
        }
    }
    ListView {
        anchors.fill: parent
        model: nameModel
        delegate: Frame {
            background: Rectangle {
                color: (index & 1) ? "#f0f0f0" : "#e0e0e0"
            }
            width: ListView.view.width
            RowLayout {
                width: parent.width
                CheckBox {
                    checked: model.fav
                    onToggled: nameModel.setProperty(model.index, "fav", checked)
                }
                Text {
                    Layout.fillWidth: true
                    text: model.name
                }
            }
        }
    }
    footer: Button {
        text: "Goto Favourites"
        onClicked: stackView.push("FavouritePage.qml")
    }
}

//FavouritePage.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQml.Models 2.15
Page {
    header: Frame {
        background: Rectangle { color: "lightgrey" }
        Text {
            text: "FavouritePage.qml (%1 total)".arg(favourites.count)
        }
    }
    ListView {
        anchors.fill: parent
        model: FilterDelegateModel {
            id: favourites
            model: nameModel
            filter: e => e.fav
            delegate: Frame {
                background: Rectangle {
                    color: (index & 1) ? "#f0f0f0" : "#e0e0e0"
                }
                width: ListView.view.width
                RowLayout {
                    width: parent.width
                    Text {
                        Layout.fillWidth: true
                        text: model.name
                    }
                }
            }
        }
    }
    footer: Button {
        text: "Back to HomePage"
        onClicked: stackView.pop()
    }
}

//FilterDelegateModel.qml
import QtQuick 2.15
import QtQml.Models 2.15

DelegateModel {
    property var filter: null
    groups: [
        DelegateModelGroup {
            id: allItems
            name: "all"
            includeByDefault: true
            onCountChanged: Qt.callLater(update)
        },
        DelegateModelGroup {
            id: visibleItems
            name: "visible"
        }
    ]
    filterOnGroup: "visible"
    function update() {
        allItems.setGroups(0, allItems.count, [ "all" ] );
        for (let index = 0; index < allItems.count; index  ) {
            let item = allItems.get(index).model;
            let visible = !filter || filter(item);
            if (!visible) continue;
            allItems.setGroups(index, 1, [ "all", "visible" ]);
        }
    }
    Component.onCompleted: Qt.callLater(update)
}

您可以在線試用！

標籤：列表显示qml

上一篇：如何在顫動中向StreamBuilderListview添加自動滾動

下一篇：滾動時ListView內的水平SingleChildScrollView位置發生變化