Problem with ListView populate transition

[renatobibiano]

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.

[p3c0]

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

[renatobibiano]

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)});
                        }
                    }
                }
            }
        }
    }
}

[p3c0]

@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 ?

[renatobibiano]

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

[p3c0]

@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.

[renatobibiano]

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

[p3c0]

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