Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Listview delegate ListView



  • How to use listview inside list view ? It's does not work. I don't see Text value in listview.

        ListView {
        
                id: fixtureList
        
                width: parent.width
        
                height: parent.height - (header.height + tabBar.height) * dp
        
                anchors.top: header.bottom
        
                anchors.left: parent.left
        
                focus: true
        
                clip: true
        
                model: ListModel{}
        
                delegate: ListView {
        
                    id: dataList
        
                    model: detail
        
                    delegate: Rectangle {
        
                        color: "#ffffff"
        
                        Text {
        
                            id: startHours
        
                            text: qsTr("Hmmm")
        
                            anchors.centerIn: parent
        
                            color: "black"
        
                        }
        
                    }
        
        
        
                    Component.onCompleted: {
        
                        console.log(model.date)
        
                    }
        
        
        
                }
        
        
        
                section {
        
                    property: "name"
        
                    criteria: ViewSection.FullString
        
                    delegate: Rectangle {
        
                        color: "#d2d4c7"
        
                        width: parent.width
        
                        height: 50 * dp
        
        
        
                        Text {
        
                            text: section
        
                            anchors.left: parent.left
        
                            anchors.leftMargin: 40
        
                            anchors.top: parent.top
        
                            anchors.topMargin: 10
        
                            font.pixelSize: 17
        
                            font.family: fontRegular.name
        
        
        
                        }
        
                    }
        
        
        
                }
        
            }


  • @jsulm maybe you can help me


  • Lifetime Qt Champion

    @NullByte No, I'm not a QML expert


  • Moderators

    @NullByte your ListView delegate has no height and no width, give it some
    also your original ListModel is empty, that doesn't help either.



  • @J-Hilk

    My listview code and append model JS function. I set width and height but I see only first listview section. I have no idea how to do it

        ListView {
            id: fixtureList
            width: parent.width
            height: parent.height - (header.height + tabBar.height) * dp
            anchors.top: header.bottom
            anchors.left: parent.left
            focus: true
            clip: true
            model: ListModel{}
            delegate: ListView {
                id: dataList
                width: fixtureList.width
                height: children.height
                model: detail
                delegate: Rectangle {
                    width: parent.width
                    height: 100 * dp
                    color: "#ffffff"
                    Text {
                        id: startDate
                        text: date
                        anchors.centerIn: parent
                        color: "black"
    
                        Component.onCompleted: {
                            console.log(date)
                        }
                    }
                }
            }
    
            section {
                property: "name"
                criteria: ViewSection.FullString
                delegate: Rectangle {
                    color: "#d2d4c7"
                    width: parent.width
                    height: 50 * dp
    
                    Text {
                        text: section
                        anchors.left: parent.left
                        anchors.leftMargin: 40
                        anchors.top: parent.top
                        anchors.topMargin: 10
                        font.pixelSize: 17
                        font.family: fontRegular.name
    
                    }
                }
    
            }
        }
    
    
        function setData() {
            var matchData
            for(var i = 0; i < fixtureData.length; i++) {
                fixtureList.model.append({id: fixtureData[i].id, name: fixtureData[i].name, image: fixtureData[i].category.image})
                for(var k = 0; k < fixtureData[i].matchdata.length; k++) {
                    if(fixtureData[i].matchdata[k] !== undefined || fixtureData[i].matchdata[k] !== null) {
                        fixtureList.model.append({detail: fixtureData[i].matchdata[k], properties: fixtureData[i].matchdata[k].properties})
                    }
                }
            }
        }
    

  • Moderators

    @NullByte
    I still can't work with that 🤷‍♂️

    here's a minimal working compile-able example:

    Window
    {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
        color: "white"
        id: win
    
        ListView {
            id: fixtureList
            anchors.fill: parent
            focus: true
            clip: true
            model: 20
    
            delegate: ListView {
                id: dataList
                width: fixtureList.width * 2 / 3 // Allow right 1/3 to scroll main ListView
                height: fixtureList.height / 5  //limit to 5 Entrys(dataLists) per mainview(fixtureList)
                model: 10
                clip: true
                property int id: index
    
                delegate: Rectangle {
                    width: parent.width
                    height: 100
                    color: dataList.id % 2 ? "darkred" : "steelblue"
                    Text {
                        id: startDate
                        text: "SubList %1 entry %2".arg(dataList.id).arg(index)
                        anchors.centerIn: parent
                        color: "black"
                    }
                }
            }
        }
    }
    


  • @J-Hilk

    Thanks so much.
    It's not work. I see two listview section one is empty another one is true. And second listview (dataList) delagete is not running.

        ListView {
            id: fixtureList
            width: parent.width
            height: (parent.height - (header.height + tabBar.height * dp) * dp)
            anchors.top: header.bottom
            anchors.left: parent.left
            focus: true
            clip: true
            model: ListModel{}
            delegate: ListView {
                id: dataList
                width: fixtureList.width * 2 / 3 // Allow right 1/3 to scroll main ListView
                height: fixtureList.height / 5  //limit to 5 Entrys(dataLists) per mainview(fixtureList)
                model: detail
                clip: true
                property int id: index
    
                delegate: Rectangle {
                    width: parent.width
                    height: 100 * dp
                    color: dataList.id % 2 ? "darkred" : "steelblue"
                    Text { // not showing.
                        id: startDate
                        text: "SubList %1 entry %2".arg(dataList.id).arg(index)
                        anchors.centerIn: parent
                        color: "black"
    
                        Component.onCompleted: {
                            console.log(id) // Cannot print.
                        }
                    }
                }
            }
    
            section {
                property: "name"
                criteria: ViewSection.FullString
                delegate: Rectangle {
                    color: "#d2d4c7"
                    width: parent.width
                    height: 50 * dp
    
                    Text {
                        text: section
                        anchors.left: parent.left
                        anchors.leftMargin: 40
                        anchors.top: parent.top
                        anchors.topMargin: 10
                        font.pixelSize: 17 * dp
                        font.family: fontRegular.name
    
                    }
                }
    
            }
        }
    


  • dataList delegate is not running/work

            delegate: Rectangle {
                width: parent.width
                height: 100 * dp
                color: dataList.id % 2 ? "red" : "blue"
                Text { // not showing.
                    id: startDate
                    text: "SubList %1 entry %2".arg(dataList.id).arg(index)
                    anchors.centerIn: parent
                    color: "black"
    
                    Component.onCompleted: {
                        console.log("I'm here ") // not print
                    }
                }
    
                Component.onCompleted: {
                    console.log("I'm here 1") // not print
                }
            }


  • @SGaist have any idea ?



  • @J-Hilk said in Listview delegate ListView:

    @NullByte
    I still can't work with that 🤷‍♂️

    here's a minimal working compile-able example:

    Window
    {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
        color: "white"
        id: win
    
        ListView {
            id: fixtureList
            anchors.fill: parent
            focus: true
            clip: true
            model: 20
    
            delegate: ListView {
                id: dataList
                width: fixtureList.width * 2 / 3 // Allow right 1/3 to scroll main ListView
                height: fixtureList.height / 5  //limit to 5 Entrys(dataLists) per mainview(fixtureList)
                model: 10
                clip: true
                property int id: index
    
                delegate: Rectangle {
                    width: parent.width
                    height: 100
                    color: dataList.id % 2 ? "darkred" : "steelblue"
                    Text {
                        id: startDate
                        text: "SubList %1 entry %2".arg(dataList.id).arg(index)
                        anchors.centerIn: parent
                        color: "black"
                    }
                }
            }
        }
    }
    

    It's solved. Thanks for help.

    Problem is my model is to be wrong.


  • Moderators

    @NullByte Great that you managed to find the issue 😁,
    good luck!


Log in to reply