Problem with ListView populate transition



  • Hello everyone!

    I'm having some difficulties while trying to use a transition on a ListView, when I populate this list with a ListModel with some ListElements. When I do the same thing, populating the ListView with a JSON everything works fine.

    Can anyone help me?

    Regards.


  • Moderators

    Hi @renatobibiano It would be more helpful if you post the code.



  • Here is my code:

    import QtQuick 2.5
    import QtQuick.Controls 1.4
    import QtQuick.Layouts 1.2
    import QtQuick.Controls.Styles 1.4
    import QtQuick.Dialogs 1.2
    
    Rectangle{
        id: self
        objectName: "studentView"
        color: ui.whiteRGB
    
        ColumnLayout {
            id: columnLayout
            width: parent.width
            height: parent.height
            spacing: 0
    
            /****************************************************
                Initial bar with some information
             ****************************************************/
            Rectangle {
                id: studentBar
                Layout.preferredHeight: ui.mm(15)
                Layout.fillWidth: true
                color: ui.studentBarRGB
    
                Rectangle {
                    id: frame
                    color: "#EAEAEA"
                    width: ui.mm(12)
                    height: ui.mm(12)
                    radius: 50
                    border.color: ui.whiteRGB
                    border.width: ui.mm(1)
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    anchors.leftMargin: parent.width*0.2
    
                    Image {
                        id: user
                        source: "qrc:/assets/images/pessoa_1.svg"
                        sourceSize.height: ui.mm(9)
                        sourceSize.width: ui.mm(9)
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.horizontalCenter: parent.horizontalCenter
                        fillMode: Image.PreserveAspectCrop
                    }
                }
    
                Label {
                    id: studentLbl
                    anchors.left: parent.left
                    anchors.leftMargin: parent.width*0.5
                    anchors.top: parent.top
                    anchors.topMargin: ui.mm(3)
                    text: {
                        var split = ui.studentName.split(" ");
                        return split[0];
                    }
                    font.bold: true
                    font.family: ui.studentFont
                    font.pixelSize: ui.mm(3.5)
                    color: ui.whiteRGB
                }
    
                Label{
                    id: serieLbl
                    text: ui.studentClass
                    font.family: ui.toolBarFont
                    font.pixelSize: ui.mm(3)
                    anchors.left: parent.left
                    anchors.leftMargin: parent.width*0.5
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: ui.mm(2)
                }
            }
    
            Item {
                Layout.preferredWidth: parent.width
                Layout.preferredHeight: parent.height - studentBar.height
                clip: true
    
                Rectangle {
                    height: ui.mm(0.2)
                    width: parent.width
                    color: "#22000000"
                    z: list.z + 1
                }
    
                ListView {
                    id: list
                    anchors.fill: parent
                    model: MenuModel {}
    
    				//with this animation the list don't work
                    populate: Transition {
                        NumberAnimation { properties: "y"; duration: 1000; easing.type: Easing.OutBack }
                    }
    
                    delegate: Rectangle {
                        id: item
                        width: self.width
                        height: ui.mm(10)
                        color: (itemArea.pressed) ? "#EAEAEA" : ui.whiteRGB
                        opacity: (itemArea.pressed) ? 0.5 : 1
    
                        RowLayout {
                            anchors.fill: parent
                            spacing: 0
    
                            Rectangle {
                                id: imgRec
                                Layout.preferredWidth: ui.mm(10)
                                Layout.preferredHeight: ui.mm(10)
                                Layout.leftMargin: ui.mm(1)
                                color: ui.whiteRGB
    
                                Image {
                                    source: image
                                    sourceSize.height: ui.mm(9)
                                    sourceSize.width: ui.mm(9)
                                    anchors.verticalCenter: parent.verticalCenter
                                    anchors.horizontalCenter: parent.horizontalCenter
                                    fillMode: Image.PreserveAspectCrop
                                }
                            }
    
                            Item {
                                Layout.preferredWidth: parent.width
                                Layout.preferredHeight: parent.height
    
                                Label {
                                    id: menuName
                                    text: name
                                    color: ui.backgroundRGB
                                    font.bold: true
                                    font.pixelSize: ui.mm(3)
                                    font.family: ui.menuFont
                                    anchors.verticalCenter: parent.verticalCenter
                                    anchors.left: parent.left
                                    anchors.leftMargin: ui.mm(5)
                                }
                            }
                        }
    
                        Rectangle {
                            width: item.width*0.9
                            height: ui.mm(0.2)
                            color: "#22050505"
                            anchors.bottom: item.bottom
                            anchors.horizontalCenter: parent.horizontalCenter
                        }
    
                        MouseArea{
                            id: itemArea
                            anchors.fill: parent
                            onClicked: {
                                ui.pushItem({"item" : Qt.resolvedUrl(qml)});
                            }
                        }
                    }
                }
            }
        }
    }
    

  • Moderators

    @renatobibiano Not sure. Does it work with add when you later add items to it ? The example you posted doesn't run as the model is undefined. Can you post a minimal example that can show the problem ?



  • Here is a simple code that also do not work:

    import QtQuick 2.5
    import QtQuick.Controls 1.4
    import QtQuick.Layouts 1.2
    import QtQuick.Controls.Styles 1.4
    import QtQuick.Dialogs 1.2
    
    ApplicationWindow {
        title: qsTr("Test")
        width:  250
        height: 400
        visible: true
    
        Rectangle{
            id: self
            anchors.fill: parent
    
            ColumnLayout {
                id: columnLayout
                width: parent.width
                height: parent.height
                spacing: 0
    
                Item {
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    clip: true
    
                    Rectangle {
                        height: 2
                        width: parent.width
                        color: "#22000000"
                        z: list.z + 1
                    }
    
                    ListView {
                        id: list
                        anchors.fill: parent
                        model: ListModel {
                            ListElement {
                                name: "item 1"
                            }
                            ListElement {
                                name: "item 2"
                            }
                            ListElement {
                                name: "item 3"
                            }
                        }
    
                        delegate: Rectangle {
                            id: item
                            width: self.width
                            height: 100
                            color: "#EAEAEA"
    
                            RowLayout {
                                anchors.fill: parent
                                spacing: 0
    
                                Item {
                                    Layout.preferredHeight: parent.height
                                    Layout.fillWidth: true
    
                                    Label {
                                        text: name
                                        color: "#000000"
                                        font.bold: true
                                        font.pixelSize: 12
                                        anchors.verticalCenter: parent.verticalCenter
                                    }
                                }
                            }
    
                            Rectangle {
                                width: item.width*0.9
                                height: 2
                                color: "#22050505"
                                anchors.bottom: item.bottom
                                anchors.horizontalCenter: parent.horizontalCenter
                            }
                        }
    
                        populate: Transition {
                            NumberAnimation { properties: "y"; duration: 1000; easing.type: Easing.OutBack }
                        }
                    }
                }
            }
        }
    }
    

  • Moderators

    @renatobibiano It's hard to find out the exact problem but I think something related to layouts is messed up in your code. Try commenting out all layout related stuff and try again.



  • @p3c0 I've changed the Layout to widths and heights and it still don't work :(


  • Moderators

    @renatobibiano Ok. Try giving width and height explicitly for components where you have used anchors.fill: parent.



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