use qml treeview in pyside 6 or similar

qAminzzz

hi, i wanna use Treeview. some TreeView that has checkbox for any item
but when i use it i got this error << TreeView is not a type >> is there any way to use it in qml or use it? or can i use it in python with checkbox in any item (something like delegate) ?

i'm grateful for any help

qAminzzz

hi guys, i'm back again (;. after a few hours i made a simple treeview that you can use it:

TreeView Class Code:

import QtQuick 2.0
import QtQuick.Controls 2.5

Item
{
    id: root

    // ************* UNDER LIST *************

    property var underModel: ListModel
    {
        Component.onCompleted:
        {
            for(var i = 0; i < 20; i++)
            {
                append(
                            {
                                text: "C:/Qt/Examples/" + i
                            }
                            )
            }
        }
    }

    // ************* MAIN LIST *************
    property var mainModel: ListModel
    {
        Component.onCompleted:
        {
            for(var i = 0; i < 10; i++)
            {
                append(
                            {
                                text: "C:/Qt/Examples/Qt-6.2.2/core5/widgets/tools/codecs/doc/images " + i
                            }
                            )
            }
        }
    }

    ListView
    {
        id: mainLV
        anchors.fill: parent
        spacing: 1
        model: root.mainModel

        delegate: ItemDelegate
        {
            width: root.width
            height: 20

            // ************************** UNDER LIST **************************

            ListView
            {
                id: lvUnder2
                height: count * 21
                anchors.left: parent.left
                anchors.leftMargin: 20
                anchors.right: parent.right
                spacing: 1
                y: 0
                model: root.underModel
                visible: false
                z: 20

                delegate: ItemDelegate
                {
                    width: root.width
                    height: 20

                    Rectangle
                    {
                        height: 21
                        width: 1.5
                        color: "black"
                    }

                    background: Rectangle
                    {
                        id: rctUnderLVBG2
                        color: "white"
                    }

                    contentItem: Item
                    {
                        anchors.fill: parent

                        Rectangle
                        {
                            width: 15
                            height: 1
                            anchors.left: parent.left
                            anchors.verticalCenter: parent.verticalCenter
                            color: "black"
                        }

                        Label
                        {
                            anchors.left: parent.left
                            anchors.verticalCenter: parent.verticalCenter
                            transform: Translate {y: -1}
                            anchors.leftMargin: 18
                            text: model.text
                        }
                    }
                }
            }
            // ************************** UNDER LIST **************************

            background: Rectangle
            {
                id: rctMainLVBG
                color: "white"
            }

            contentItem: Item
            {
                anchors.fill: parent

                MouseArea
                {
                    anchors.fill: parent

                    onClicked:
                    {
                        if(imgOpenList.source== "open image here")
                        {
                            imgOpenList.source= "close image here"
                            lvUnder2.visible= false
                            mainLV.itemAtIndex(index).height= 20
                        }

                        else
                        {
                            imgOpenList.source= "enter open image here"
                            lvUnder2.y= 21
                            mainLV.itemAtIndex(index).height= lvUnder2.height + 21
                            lvUnder2.visible= true
                        }
                    }
                }

                Label
                {
                    id: lblAddress
                    anchors.left: imgOpenList.left
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.top: parent.top
                    anchors.leftMargin: 14
                    text: model.text
                }

                Image
                {
                    id: imgOpenList
                    source: "enter open image here"
                    width: 11
                    height: 11
                    anchors.left: parent.left
                    anchors.top: parent.top
                    anchors.topMargin: 1
                    anchors.leftMargin: 2
                }
            }
        }
    }
}

main:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

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

    TreeView
    {
        id: mine
        anchors.fill: parent
    }
}

it's not completed but is enough to expand; ♥

jsulm

@qAminzzz Do you have

import QtQuick.Controls 1.4

in your QML file like shown in documentation (https://doc.qt.io/qt-5/qml-qtquick-controls-treeview.html)?

qAminzzz

@jsulm yeah i used it. but i got this error: module "QtQuick.Controls" version 1.4 is not installed

i tested these things in qml too but. but this module is removed

jsulm

@qAminzzz Then change that import according to your Qt version...

jsulm

@qAminzzz said in use qml treeview in pyside 6 or similar:

but this module is removed

Removed from what?
What Qt version do you use and how did you install it?

qAminzzz

@jsulm i use qt 6.2.2 and pyside 6. in both i got < module "QtQuick.Controls" version 1.4 is not installed >

jsulm

@qAminzzz In Qt6 TreeView is not there.
It looks like you have to buy it: https://marketplace.qt.io/products/treeview
Unfortunate decition made by QtCompany...

qAminzzz

@jsulm says: TreeView is not a type. code :

import QtQuick 
import QtQuick.Window 
import QtQuick.Controls 
//import QtQuick.Controls 1.4 // module QtQuick.Controls 1.4 is not installed

ApplicationWindow
{
    id: root
    width: 1020
    height: 610
    visible: true
    title: qsTr("Analyzer")

    TreeView // TreeView is not a type
    {

    }

qAminzzz

@qAminzzz i can't really accept this decition. so do i have to make it myself? ):

jsulm

@qAminzzz said in use qml treeview in pyside 6 or similar:

so do i have to make it myself?

If you want to use Qt6 then yes.
Or stay with Qt5 for now and see what happens with TreeView in Qt6. Maybe QtCompany will change its mind (though there is no guarantee).

You could also look for open source and free TreeView alternatives. Especially the KDE project could have something.

qAminzzz

@jsulm ok. thank you very much for your answers (:❤

qAminzzz

hi guys, i'm back again (;. after a few hours i made a simple treeview that you can use it:

TreeView Class Code:

import QtQuick 2.0
import QtQuick.Controls 2.5

Item
{
    id: root

    // ************* UNDER LIST *************

    property var underModel: ListModel
    {
        Component.onCompleted:
        {
            for(var i = 0; i < 20; i++)
            {
                append(
                            {
                                text: "C:/Qt/Examples/" + i
                            }
                            )
            }
        }
    }

    // ************* MAIN LIST *************
    property var mainModel: ListModel
    {
        Component.onCompleted:
        {
            for(var i = 0; i < 10; i++)
            {
                append(
                            {
                                text: "C:/Qt/Examples/Qt-6.2.2/core5/widgets/tools/codecs/doc/images " + i
                            }
                            )
            }
        }
    }

    ListView
    {
        id: mainLV
        anchors.fill: parent
        spacing: 1
        model: root.mainModel

        delegate: ItemDelegate
        {
            width: root.width
            height: 20

            // ************************** UNDER LIST **************************

            ListView
            {
                id: lvUnder2
                height: count * 21
                anchors.left: parent.left
                anchors.leftMargin: 20
                anchors.right: parent.right
                spacing: 1
                y: 0
                model: root.underModel
                visible: false
                z: 20

                delegate: ItemDelegate
                {
                    width: root.width
                    height: 20

                    Rectangle
                    {
                        height: 21
                        width: 1.5
                        color: "black"
                    }

                    background: Rectangle
                    {
                        id: rctUnderLVBG2
                        color: "white"
                    }

                    contentItem: Item
                    {
                        anchors.fill: parent

                        Rectangle
                        {
                            width: 15
                            height: 1
                            anchors.left: parent.left
                            anchors.verticalCenter: parent.verticalCenter
                            color: "black"
                        }

                        Label
                        {
                            anchors.left: parent.left
                            anchors.verticalCenter: parent.verticalCenter
                            transform: Translate {y: -1}
                            anchors.leftMargin: 18
                            text: model.text
                        }
                    }
                }
            }
            // ************************** UNDER LIST **************************

            background: Rectangle
            {
                id: rctMainLVBG
                color: "white"
            }

            contentItem: Item
            {
                anchors.fill: parent

                MouseArea
                {
                    anchors.fill: parent

                    onClicked:
                    {
                        if(imgOpenList.source== "open image here")
                        {
                            imgOpenList.source= "close image here"
                            lvUnder2.visible= false
                            mainLV.itemAtIndex(index).height= 20
                        }

                        else
                        {
                            imgOpenList.source= "enter open image here"
                            lvUnder2.y= 21
                            mainLV.itemAtIndex(index).height= lvUnder2.height + 21
                            lvUnder2.visible= true
                        }
                    }
                }

                Label
                {
                    id: lblAddress
                    anchors.left: imgOpenList.left
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.top: parent.top
                    anchors.leftMargin: 14
                    text: model.text
                }

                Image
                {
                    id: imgOpenList
                    source: "enter open image here"
                    width: 11
                    height: 11
                    anchors.left: parent.left
                    anchors.top: parent.top
                    anchors.topMargin: 1
                    anchors.leftMargin: 2
                }
            }
        }
    }
}

main:

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.5

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

    TreeView
    {
        id: mine
        anchors.fill: parent
    }
}

it's not completed but is enough to expand; ♥