Solved 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 } } } } };
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 colomnScrollView {
width: 440
height: 400
contentWidth: childrenRect.width //******************************** (1)
contentHeight: childrenRect.width //******************************** (2)Column{ width : childrenRect.width height : childrenRect.heigth }
-
@yassser thank you!