Scrollist issue in QML

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