Facing Problems While Using ListView.

at_pradeep

I am having following QML List View which displays list in a parent rectangle:
I am updating this list from the JavaScript on some external events using "listModel.append()" functionality.

@Rectangle
{
id: listMain;
color: "#ffffff"

width: 1000
height: 700


ListModel
{
    id: ListModel

    ListElement
    {
        testImageSrc: "../Test1.png"
        test2ImageSrc: "../Test2.png"
        test1NameSrc: "Header 1"
        test2NameSrc: "Sub Heading 1"
        itemIndex: 0;
    }

    ListElement
    {
        testImageSrc: "../Test1.png"
        test2ImageSrc: "../Test2.png"
        test1NameSrc: "Header 2"
        test2NameSrc: "Sub Heading 2"
        itemIndex: 1;
    }

}

Component
{
    id: listDelegate

    Item
    {
        id: listItem
        property int index: itemIndex
        height: 130
        width: parent.width

        MouseArea
        {
            anchors.fill: parent
            onReleased:
            {
                listView.currentIndex = index;
            }
        }

        Row
        {
            id: listRow
            anchors.fill: parent
            spacing: 5

            Image
            {
                id: testImage
                source: testImageSrc
                anchors
                {
                    verticalCenter: parent.verticalCenter;
                    left: parent.left;
                    leftMargin: 5;
                }
            }

            Image
            {
                id: testImage1
                source: test2ImageSrc

                anchors
                {
                    verticalCenter: parent.verticalCenter;
                    left: testImage.right;
                    leftMargin: 5;
                }
            }



            Rectangle
            {
                anchors
                {
                    top: parent.top;
                    topMargin: 35;
                    bottom: parent.bottom;
                    left: testImage1.right;
                    leftMargin: 15;
                    right: parent.right;
                }

                color: "transparent"

                Text
                {
                    id: testName
                    text: test1NameSrc
                    font.family: "verdana"
                    font.pointSize: 13;

                    anchors
                    {
                        top: parent.top;
                    }
                }

                Text
                {
                    id: test2Name
                    text: test2NameSrc
                    font.family: "verdana"
                    font.pointSize: 9;
                    color: "gray"

                    anchors
                    {
                        top: testName.bottom;
                        topMargin: 5
                    }
                }

            }
        }
    }
}

ListView
{
    id: listView
    anchors.fill: parent
    model: ListModel
    delegate: listDelegate
    focus: true
    highlight: Rectangle { color: "lightsteelblue"; radius: 20 }
    highlightMoveSpeed: 1500

}

ScrollBar
{
    flickable: listView
    vertical: true
}

}@

I am facing following problems with this list view.

1) When i run this code either using "qmlviewer" or by running my application i get following warnings but I am able
to see the list with this warnings also.
@ QML Row: Cannot specify left, right, horizontalCenter, fill or centerIn anchors for items inside Row@

2) There are around 20-30 items in this list so i have added scroll bar using ScrollBar and Flickable
List is only vertically scrollable. but when i scroll the list it scrolls out of the bonds of the rectangle as actually it should
have scrolled within the bound of the parent rectangle, how should i tell the list to scroll with the particular boundaries.

3) I am updating list from the javascript on some external events, it happen that i am first clearing the list contains using
"clear()" function of list view and then adding new items to it. doing this blocks the scrolls of clicks on list and after
update is done selected index of the list gets shifted to the first item of the list. is there any way of keeping the list
scrolling while we update it in the background.

Please provide some suggestions on these problems.

Thanks in advance :).

vsorokin

you shouldn't use anchors for children of row. Check your listDelegate
@clip:true@ for your ListView
you can try use @ListView::positionViewAtIndex ( int index, PositionMode mode )@ for return to position.

at_pradeep

Thanks for the reply it helped me a lot.

Nominate our 2022 Qt Champions!

Facing Problems While Using ListView.