Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Problem with ListView populate transition
QtWS25 Last Chance

Problem with ListView populate transition

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
listviewtransitionpopulatemodel
8 Posts 2 Posters 3.8k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • R Offline
    R Offline
    renatobibiano
    wrote on 4 Nov 2015, 12:51 last edited by
    #1

    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.

    P 1 Reply Last reply 5 Nov 2015, 05:51
    0
    • R renatobibiano
      4 Nov 2015, 12:51

      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.

      P Offline
      P Offline
      p3c0
      Moderators
      wrote on 5 Nov 2015, 05:51 last edited by
      #2

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

      157

      1 Reply Last reply
      0
      • R Offline
        R Offline
        renatobibiano
        wrote on 5 Nov 2015, 11:25 last edited by p3c0 11 May 2015, 11:53
        #3

        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)});
                                }
                            }
                        }
                    }
                }
            }
        }
        
        P 1 Reply Last reply 5 Nov 2015, 12:51
        0
        • R renatobibiano
          5 Nov 2015, 11:25

          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)});
                                  }
                              }
                          }
                      }
                  }
              }
          }
          
          P Offline
          P Offline
          p3c0
          Moderators
          wrote on 5 Nov 2015, 12:51 last edited by
          #4

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

          157

          1 Reply Last reply
          0
          • R Offline
            R Offline
            renatobibiano
            wrote on 5 Nov 2015, 14:18 last edited by p3c0 11 Jun 2015, 05:54
            #5

            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 }
                                }
                            }
                        }
                    }
                }
            }
            
            P 1 Reply Last reply 6 Nov 2015, 06:26
            0
            • R renatobibiano
              5 Nov 2015, 14:18

              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 }
                                  }
                              }
                          }
                      }
                  }
              }
              
              P Offline
              P Offline
              p3c0
              Moderators
              wrote on 6 Nov 2015, 06:26 last edited by
              #6

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

              157

              R 1 Reply Last reply 12 Nov 2015, 17:35
              0
              • P p3c0
                6 Nov 2015, 06:26

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

                R Offline
                R Offline
                renatobibiano
                wrote on 12 Nov 2015, 17:35 last edited by
                #7

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

                P 1 Reply Last reply 14 Nov 2015, 05:38
                0
                • R renatobibiano
                  12 Nov 2015, 17:35

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

                  P Offline
                  P Offline
                  p3c0
                  Moderators
                  wrote on 14 Nov 2015, 05:38 last edited by
                  #8

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

                  157

                  1 Reply Last reply
                  0

                  2/8

                  5 Nov 2015, 05:51

                  topic:navigator.unread, 6
                  • Login

                  • Login or register to search.
                  2 out of 8
                  • First post
                    2/8
                    Last post
                  0
                  • Categories
                  • Recent
                  • Tags
                  • Popular
                  • Users
                  • Groups
                  • Search
                  • Get Qt Extensions
                  • Unsolved