Facing Problems While Using ListView.



  • 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 :).



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


  • Thanks for the reply it helped me a lot.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.