ScrollView: how to anchors elements of different heights created in the repeater?

dmitry1992

Here is my current code, but it doesn't work:

        ScrollView {
            width: 440
            height: 400
            contentWidth: 440
            contentHeight: 500
            clip: true

            Column {
                spacing: 20
                Repeater {
                    model: [
                        {title: "title1", values: ["values1",
                                                   "values2",
                                                   "values3"]},
                        {title: "title2", values: ["values1"]},
                        {title: "title3", values: ["values1",
                                                   "values2"]}
                    ]

                    Text {
                        id: title
                        text: modelData.title
                        color: "#16202a"

                        font {
                            family: oswaldRegular.name
                            pixelSize: 22
                            weight: Font.Medium
                        }
                    }

                    Repeater {
                        model: modelData.values
                        Text {
                            text: modelData
                            color: "#6a7383"

                            anchors {
                                left: title.left
                                top: title.bottom
                                topMargin: 20 * index
                            }

                            font {
                                family: openSans.name
                                pixelSize: 13
                            }
                        }
                    }

                    Rectangle {
                        height: 1
                        width: 410
                        color: "#c1c3cf"

                        anchors {
                           left: title.left
                           top: title.bottom
                           topMargin: 20 * modelData.values.length
                        }
                    }
                }
            }
        };

I would like to get elements that will have the same indentation between the created elements (as in the picture above), regardless of how many values will be in model.values. Thanks.

yassser

Hi! @dmitry1992 from what i know about ScrollView you can't anchor elements to it, otherwise you will block the flow .

one thing you can do is to give the element the same height:

give the scrollview a width of childrenRect.width to generate a scrolling space
do the samething with colomn

ScrollView {
width: 440
height: 400
contentWidth: childrenRect.width //******************************** (1)
contentHeight: childrenRect.width //******************************** (2)

             Column{
                                width : childrenRect.width 
                                 height : childrenRect.heigth

              }

dmitry1992

@yassser thank you!