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

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



  • 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
                            }
                        }
                    }
                }
            };
    

    0_1546108047916_Screenshot_1.png

    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.



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


  • @yassser thank you!


Log in to reply