【问题标题】:Creating dynamic ListModel is QML创建动态 ListModel 是 QML
【发布时间】:2021-09-07 23:40:12
【问题描述】:

我一直在尝试用我拥有的列表中的数据填充 QML 中的 ListView,但在文档中它没有显示如何动态填充 ListModel 或 ListView。列表中的数据不断变化,我打算实时更新列表,这就是我不需要硬编码模型的原因。

根据教程,这是可行的:

        Rectangle {
            anchors.horizontalCenter: parent.horizontalCenter
            color: "black"
            height: 500
            width: 0.95 * parent.width
            ListView {
                anchors.fill: parent
                model: fruitModel
                delegate: fruitDelegate
            }
        }

        ListModel {
            id: fruitModel
            ListElement {
                name: "Apple"
                cost: 2.45
            }
            ListElement {
                name: "Orange"
                cost: 3.25
            }
            ListElement {
                name: "Banana"
                cost: 1.95
            }
        }

        Component {
            id: fruitDelegate
            Row {
                spacing: 10
                Text { text: name; color: "white" }
                Text { text: '$' + cost; color: "white" }
            }
        }

但这不是:

userModel : ["Tony", "Stark"] //list containing names of users
Rectangle {
            anchors.horizontalCenter: parent.horizontalCenter
            color: "black"
            height: 500
            width: 0.95 * parent.width
            ListView {
                anchors.fill: parent
                model: userModel // a list containing all users
                delegate: fruitDelegate
            }
}

Component {
            id: fruitDelegate
            Row {
                spacing: 10
                Text { text: name; color: "white" }
            }
}

【问题讨论】:

    标签: qt qml


    【解决方案1】:

    角色定义了如何访问信息,例如fruitModel 有2 个角色:名称和成本。但是当使用列表作为模型时,您必须使用modelData 作为角色来访问信息:

    Component {
        id: fruitDelegate
        Row {
            spacing: 10
            Text { text: modelData; color: "white" }
        }
    }
    

    可以通过append函数更新ListModel:

    Rectangle {
        anchors.horizontalCenter: parent.horizontalCenter
        color: "black"
        height: 500
        width: 0.95 * parent.width
        ListView {
            anchors.fill: parent
            model: fruitModel
            delegate: fruitDelegate
        }
    }
    
    ListModel {
        id: fruitModel
        Component.onCompleted: {
            fruitModel.append({"name": "Tony"})
            fruitModel.append({"name": "Stark"})
        }
    }
    
    Component {
        id: fruitDelegate
        Row {
            spacing: 10
            Text { text: name; color: "white" }
        }
    }
    

    【讨论】:

    • 使用 Component.onCompleted 存在问题,如果列表更新,则不会显示新列表,而是显示在实例化过程中存在的列表。我们怎么能解决这个问题?使用带有单独组件的加载器会有所帮助吗?
    • @EvanKrause 我不知道您如何更新列表,所以我的演示是通用的。如果您有其他问题,请创建一个新帖子,提供详细信息,说明您如何更新列表。请阅读How to Ask 并查看tour
    • 好的,我添加了一个新问题:stackoverflow.com/questions/69092223/… 谢谢大家的帮助!
    猜你喜欢
    • 1970-01-01
    • 2021-10-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-03-25
    相关资源
    最近更新 更多