将数据添加到 QML TreeView

Posted 2023-02-16

【中文标题】将数据添加到 QML TreeView

【英文标题】：Adding data to QML TreeView

【发布时间】：2019-09-11 14:20:30

【问题描述】：

我正在开发一个应用程序。我需要向 TreeView 添加数据，但 TreeView 的嵌套模型存在一些问题。

我创建了一个列表模型

ListModel 
    id: fruitModel
    ListElement 
       name: "Apple"
       price: 2.45
    

我可以通过以下方式展示这个项目

TreeView 
    id: mytreeView
    anchors.fill: parent
    model: fruitModel
    TableViewColumn 
        title: "Name"
        role: "name"
        width: 200
    
    TableViewColumn 
        title: "Price"
        role: "price"
        width: 200
    

但是，我需要显示嵌套项目，例如

ListModel 
   ListElement 
            categoryName: "Fruits"
            collapsed: true
            subItems: [
                ListElement  itemName: "Orange" , itemPrice: 2.40,
                ListElement  itemName: "Apple" ,  itemPrice: 2.40,
                ListElement  itemName: "Pear" ,   itemPrice: 2.40,
                ListElement  itemName: "Lemon" ,  itemPrice: 2.40
            ]
    

我在 ListView 中列出了这些项目，但我需要在 TreeView 中列出这些项目。那么，如何使用 QML 在 TreeView 中列出这个嵌套的 ListModel？

【参考方案1】：

首先，您需要更正角色以匹配您的新嵌套模型/ListElement 的范围/角色。并正确构建您的模型（您对 ListElement 项目使用“,”.. 使用“;”）如下更正。

其次，使用listmodel函数object get(index)向下迭代并锁定嵌套模型。

这行得通！：

ListModel 
    id:fruitModel
    ListElement 
        categoryName: "Fruits"
        collapsed: true
        subItems: [
            ListElement  itemName: "Orange" ; itemPrice: 2.40,
            ListElement  itemName: "Apple" ;  itemPrice: 2.40,
            ListElement  itemName: "Pear" ;   itemPrice: 2.40,
            ListElement  itemName: "Orange" ;  itemPrice: 2.40
        ]
    
    ListElement 
        categoryName: "Vegetable"
        collapsed: true
        subItems: [
            ListElement  itemName: "Broccoli" ; itemPrice: 4.20,
            ListElement  itemName: "Garlic" ;  itemPrice: 7.40,
            ListElement  itemName: "beens" ;   itemPrice: 6.40,
            ListElement  itemName: "Eggplant" ;  itemPrice: 1.40
        ]
    

TreeView 
    id: mytreeView
    anchors.fill: parent
    model:fruitModel.get(0).subItems  // get nested model this way , or by javascript! 
    TableViewColumn 
        title: "Name"
        role: "itemName"   // here
        width: 200
    
    TableViewColumn 
        title: "Price"
        role: "itemPrice"   // here 
        width: 200
    
    //Component.onCompleted: model= fruitModel.get(0).subItems

更新日期：

要显示多个嵌套元素，您可以使用section 属性和ListView，并使用TreeView 显示嵌套模型：

ListView 
    anchors.fill: parent
    model: fruitModel
    delegate: nameDelegate
    focus: true
    highlight: Rectangle 
        color: "lightblue"
        width: parent.width
    
    section 
        property: "categoryName"
        criteria: ViewSection.FullString
        delegate: Rectangle 
            color: "#b0dfb0"
            width: parent.width
            height: childrenRect.height + 4
            Text  anchors.left: parent.left
                font.pixelSize: 16
                font.bold: true
                text: section
            
        
    

Component 
    id: nameDelegate
    TreeView 
        id: mytreeView
        width: parent.width
        model:fruitModel.get(index).subItems  // get nested model
        TableViewColumn 
            title: "Name"
            role: "itemName"   // here
            width: 200
        
        TableViewColumn 
            title: "Price"
            role: "itemPrice"   // here
            width: 200
        
    

【讨论】：

请不要在ListModel 上依赖get(int)，除非您非常确定，您永远不想在演变为使用C++ 定义模型的应用程序中使用那段代码.标准 C++ 模型不提供该功能。在 C++ 模型上提供该函数并非微不足道（许多人返回属性映射，这对于只读来说是可以的，但如果您想使用该对象来修改模型则不起作用）。也就是说，我对树视图一无所知，没有运行 Qt 环境，所以我无法提供解决方案。请注意这个潜在的问题！

@derM，感谢您的建议。我有一个功能性应用程序，其中模型完全填充在 QML 中。所有用户条目都存储在具有嵌套 attribues 的单个元素中 .. 显示这些属性（一次一个）但然后不去更进一步......每个元素都被传递给父模型以进行保留和 JSON 字符串化。就编码人员知道自己在做什么而言，这很方便。

感谢您的解决方案，但我想在我的子项目树中显示类别名称。如何使用类别名称显示我的子项目？此外，我的列表模型中将有多个项目。如何将多个 ListModel 项目添加到我的树中？你能帮我解决这个问题吗？

@HilalKöktürk，这取决于您计划显示的外观...您想将整个模型显示为可扩展的树视图吗？或者您唯一关心的是按顺序列出内容

我想将我的整个模型显示为可展开的树视图