Problem with listViews and Flickable

[cosmoff]

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

[Shrinidhi Upadhyaya]

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:-

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 { }