Scrollist issue in QML - qt

Question

I'm trying to make scrollable list in QML.
Though its running successfully but whenever am varying the size of main window the pattern of the list distorts or the items overlaps on each other.
Any suggestions where is the bug in my code.
Tried to vary the anchors but then also no luck on the issue.
Below is the code snippet
import QtQuick 1.1
Item{
....
Rectangle{
....
Rectangle {
....
color: "white"
anchors.centerIn: main.Center
Rectangle {
...
ListView {
id: list_min
....
snapMode: ListView.SnapToItem
model: 20
delegate: Rectangle{
width: list_min.width
height: list_min.height
color: "transparent"
Text {
anchors.verticalCenter: parent.verticalCenter
text: index+1
font.pixelSize: parent.width/1.5
}
Text {
text: index+2
font.pixelSize: parent.width/1.5
anchors.top: parent.top
anchors.topMargin: 150
}
Text {
text: index
font.pixelSize: parent.width/1.5
anchors.bottom: parent.bottom
anchors.bottomMargin: 150
}
}
onMovementEnded: list_min.currentIndex = list_min.visibleArea.yPosition * list_min.count
Component.onCompleted: list_min.visibleArea
}
Rectangle {
....
gradient: Gradient {
GradientStop { position: 0.0; color: "black" }
....
GradientStop { position: 1.0; color: "black" }
}
}
}
}

Answer 1

I would recommend using the Column tag to place the text elements in the delegate.
Also for overlay_min, you need to either set the height & width OR the anchors.fill, not both.
I have modified the source code as below:
import QtQuick 1.1
Item{
width: 300
height: 240
Rectangle{
id:main
width: parent.width
height: parent.height
Rectangle {
id :frame_min
width: 120
height: main.height
color: "white"
anchors.centerIn: main.Center
Rectangle {
id: mSpinner
anchors.centerIn: parent
width: frame_min.width - 10
height: frame_min.height
color: "white"
border.color: "black"
border.width: 5
ListView {
id: list_min
width: mSpinner.width
height: mSpinner.height
anchors.topMargin: 0
anchors.top: parent.top
clip: true
snapMode: ListView.SnapToItem
model: 20
delegate: Rectangle{
width: list_min.width
height: list_min.height
color: "transparent"
Column{
anchors.verticalCenter: parent.verticalCenter
Text {
//anchors.verticalCenter: parent.verticalCenter
text: index+1
font.pixelSize: list_min.width/1.5
}
Text {
text: index+2
font.pixelSize: list_min.width/1.5
//anchors.top: parent.top
//anchors.topMargin: 150
}
Text {
text: index
font.pixelSize: list_min.width/1.5
//anchors.bottom: parent.bottom
//anchors.bottomMargin: 150
}
}
}
onMovementEnded: list_min.currentIndex = list_min.visibleArea.yPosition * list_min.count
Component.onCompleted: list_min.visibleArea
}
Rectangle {
id: overlay_min
width: frame_min.width
height: frame_min.height
//anchors.fill: frame_min
gradient: Gradient {
GradientStop { position: 0.0; color: "black" }
GradientStop { position: 0.34; color: "transparent" }
GradientStop { position: 0.35; color: "white" }
GradientStop { position: 0.66; color: "transparent" }
GradientStop { position: 1.0; color: "black" }
}
}
}
}
}
}