QML TreeView

[GrahamLa]

Hi
I need to implement a QML TreeView representing some data.
The representation requires that rows have to be displayed differently - for example some rows have a checkbox some dont.
I have managed to get all rows to have a checkbox but cant understand how to style each row differently.
This is what I have so far

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    TreeView {
        model: myModel

        alternatingRowColors: false
        anchors.fill: parent

        headerDelegate: {
            visible: false
        }

        TableViewColumn {
            title: "Name"
            role: "display"
            width: 300
        }


        itemDelegate: Item {
            id: itemId

            CheckBox {
                anchors.verticalCenter: parent.verticalCenter
                text: styleData.value
            }
        }
    }
}

And this is what I am aiming for

Thanks

[ocgltd]

Sad that after 2 years no one has answered. Many parts of the solution to this question would be of interest.

[Diracsbracket]

@GrahamLa,
@ocgltd said in QML TreeView:

Sad that after 2 years no one has answered. Many parts of the solution to this question would be of interest.

This may be of interest:
https://stackoverflow.com/questions/31985972/different-delegates-for-qml-listview

[fcarney]

DelegateChooser

[chapayev]

import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
visible: true
width: 400
height: 600

ListView {
    id: listView
    anchors.fill: parent
    model: ListModel {
        ListElement { name: "Google Drive"; expanded: false }
        ListElement { name: "Slack"; expanded: false }
        ListElement { name: "Asana"; expanded: false }
        ListElement { name: "Basecamp 3"; expanded: false }
        ListElement { name: "GoToMeeting"; expanded: false }
        ListElement { name: "Bigin"; expanded: false }
        ListElement { name: "Zoho CRM"; expanded: false }
        ListElement { name: "Zoho Desk"; expanded: false }
        ListElement { name: "Shopify"; expanded: false }
        ListElement { name: "WooCommerce"; expanded: false }
        ListElement { name: "Zoho Campaigns"; expanded: false }
    }

    delegate: Column {
        width: listView.width

        Rectangle {
            width: parent.width
            height: 50
            color: "white"
            border.color: "#ddd"

            Row {
                anchors.fill: parent
                spacing: 10
                padding: 10

                Rectangle {
                    width: 30
                    height: 30
                    radius: 5
                    color: "#f0f0f0" // Placeholder for an icon
                    anchors.verticalCenter: parent.verticalCenter
                }

                Text {
                    text: model.name
                    anchors.verticalCenter: parent.verticalCenter
                    font.pixelSize: 16
                }

                Item {
                    width: 1
                    height: 1
                    Layout.fillWidth: true
                }

                Text {
                    text: model.expanded ? "▲" : "▼"
                    font.pixelSize: 18
                    anchors.verticalCenter: parent.verticalCenter
                    MouseArea {
                        anchors.fill: parent
                        onClicked: model.expanded = !model.expanded
                    }
                }
            }
        }

        // Expandable sublist
        Column {
            visible: model.expanded
            width: parent.width

            Repeater {
                model: 3 // Three dummy sub-items for each expanded item
                delegate: Rectangle {
                    width: parent.width
                    height: 40
                    color: "#f9f9f9"
                    border.color: "#eee"

                    Text {
                        text: modelData
                        anchors.centerIn: parent
                        font.pixelSize: 14
                    }
                }
            }
        }
    }
}

}

[JonB]

@chapayev
I know nothing about QML. Your code looks to me as though it handles expansion/contraction, and subitems? Are you saying this addresses the OP's question

The representation requires that rows have to be displayed differently - for example some rows have a checkbox some dont.

?