向 QML TreeView 添加数据

Question

我正在开发一个应用程序。我需要向 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？

Answer 1

首先，您需要更正角色以匹配新嵌套的 model/ListElement 的 scope/roles。并正确构建您的模型（您对 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
        }
    }
}

向 QML TreeView 添加数据

Adding data to QML TreeView

treeview

qt

qml

listmodel