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

Problem with listViews and Flickable



  • Hello everybody,

    In my code in QMl, I created a ListView from a ListView because in my code in Qt I have a list in a list. the code in QML (which named Coco.qml) looks like this :

    ListView{
    
    model: list1
    
        delegate : ListView{
    
            model: list2
            delegate : Rectangle{
    
               Text 
               {
                   text: name
               }
    
            }
       }
    }
    

    It works very well. Now I would like to add a Flickable in order to add a indicator of position when I scroll my mouse. But I am stuck. Because when I add my flickable at this location :

    ListView{
    
    model: list1
    
    
        Flickable {
               id: flickable
               width: 100
               flickableDirection: Flickable.VerticalFlick
               contentHeight: 200
               leftMargin: configurationViewGI.flickableLeftMargin
    
    
                delegate : ListView{
    
                    model: list2
                    delegate : Rectangle{
    
                       Text 
                       {
                           text: name
                       }
    
                    }
               }
       }
    
    
       /* indicator of position */
       Rectangle {
           color: "red"
           width: 4
           radius:  2
           height: flickable.height * 10
           y: flickable.contentY * 10
    
           property real ratio: flickable.contentHeight > 0 ? flickable.height / flickable.contentHeight : 0
    
           anchors {
               left: parent.left
               leftMargin: 8
       }
    }
    

    I Have the error message on my terminal : Type Coco unavailable. I don't think it is possible to do what I want to do.

    Do you have an idea of how can I resolve the problem ?

    thanks for your help



  • Hi @cosmoff ,

    • The reason why its giving a error is because you are not closing the Flickable component ie., '}' .
    • If you want a scroll bar you can directly put it in the ListView no need for a Flicakable inside a ListView.

    Here is the sample code:-

    ListView{
    model: 4  //####list1
    spacing: 50
    
    delegate : ListView {
        height: 100
        width: 100
        model: 10 //####list2
        spacing: 5
        clip: true
    
        //####ScrollBar Indicator(Its just customized to make it visible for you)
       ScrollBar.vertical: ScrollBar {
            id: control
            contentItem: Rectangle {
                    implicitWidth: 6
                    implicitHeight: 100
                    radius: width / 2
                    color: control.pressed ? "#81e889" : "#c2f4c6"
                }
        }
    
        delegate : Rectangle{
            height: 50
            width: 100
            color: "red"
    
            Text
            {
                text: "name " + index
                anchors.centerIn: parent
            }
          }
        }
      }
    

    Output of the sample code:-

    0_1559044892711_dd0a0d8e-39dc-4648-bc2b-a5c8c06408c9-image.png

    Note:- Just copy paste this code inside youe Coco.qml and use it in your main.qml file

    Note:- You can use the default scrollbar by adding the below line inside ListView

    ScrollBar.vertical: ScrollBar { }

Log in to reply