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. Problems with ListView Scroll
Forum Updated to NodeBB v4.3 + New Features

Problems with ListView Scroll

Scheduled Pinned Locked Moved Solved QML and Qt Quick
3 Posts 2 Posters 1.1k 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.
  • D Offline
    D Offline
    davidesalvetti
    wrote on 8 Feb 2019, 09:45 last edited by
    #1

    Hi all,

    I'm having some problems with ListView. I followed some exemples on the net but I can't scroll my list up and down. It's a basic list of buttons, but the height is more than the screen available, so I need to scroll down the item.

    The code is the followiing:
    list.qml

    import QtQuick 2.11
    import QtQuick.Controls 2.1
    import QtQuick.Layouts 1.3
    
    Rectangle{
        color: "red"
    
           Column {
               id: column
               anchors.fill: parent
                ListView{
                    id: list
                    anchors.top: column
                    height: 3000
                    //clip: true
                    flickableDirection: Flickable.VerticalFlick
                    boundsBehavior: Flickable.StopAtBounds
                    interactive: true
                    Button{
                        id: button1
                        anchors.top: column
                        height: 300
                        text: "Clicca Button 1"
                    }
                    Button{
                        id: button2
                        anchors.top: button1.bottom
                        height: 300
                        text: "Clicca Button 2"
                    }
                    Button{
                        id: button3
                        anchors.top: button2.bottom
                        height: 300
                        text: "Clicca Button 3"
                    }
                    Button{
                        id: button4
                        anchors.top: button3.bottom
                        height: 300
                        text: "Clicca Button 4"
                    }
                    Button{
                        id: button5
                        anchors.top: button4.bottom
                        height: 300
                        text: "Clicca Button 5"
                    }
                    Button{
                        id: button6
                        anchors.top: button5.bottom
                        height: 300
                        text: "Clicca Button 6"
                    }
                    Button{
                        id: button7
                        anchors.top: button6.bottom
                        height: 300
                        text: "Clicca Button 7"
                    }
                    Layout.fillWidth: true
                    Layout.fillHeight: true
    
                    ScrollBar.vertical: ScrollBar {}
                }
           }
    }
    
    
    

    I'm using a QWisget based application so I charge the qml in this way, just to be clear:

        QQuickView *rotella = new QQuickView();
        rotella->setResizeMode(QQuickView::SizeRootObjectToView);
        QWidget *container = QWidget::createWindowContainer(rotella, ui->page_3);
        container->setFocusPolicy(Qt::TabFocus);
        rotella->setSource(QUrl("qrc:/List.qml"));
        container->setGeometry(0,0, width, height);
        rotella->showMaximized();
    

    The resul is this one:
    0_1549619091721_Cattura66.PNG

    What I'm trying to do is to scroll so that I can see also the other buttons.

    Can anyone please help me?
    Thanks in advance!

    J 1 Reply Last reply 8 Feb 2019, 10:01
    0
    • D davidesalvetti
      8 Feb 2019, 09:45

      Hi all,

      I'm having some problems with ListView. I followed some exemples on the net but I can't scroll my list up and down. It's a basic list of buttons, but the height is more than the screen available, so I need to scroll down the item.

      The code is the followiing:
      list.qml

      import QtQuick 2.11
      import QtQuick.Controls 2.1
      import QtQuick.Layouts 1.3
      
      Rectangle{
          color: "red"
      
             Column {
                 id: column
                 anchors.fill: parent
                  ListView{
                      id: list
                      anchors.top: column
                      height: 3000
                      //clip: true
                      flickableDirection: Flickable.VerticalFlick
                      boundsBehavior: Flickable.StopAtBounds
                      interactive: true
                      Button{
                          id: button1
                          anchors.top: column
                          height: 300
                          text: "Clicca Button 1"
                      }
                      Button{
                          id: button2
                          anchors.top: button1.bottom
                          height: 300
                          text: "Clicca Button 2"
                      }
                      Button{
                          id: button3
                          anchors.top: button2.bottom
                          height: 300
                          text: "Clicca Button 3"
                      }
                      Button{
                          id: button4
                          anchors.top: button3.bottom
                          height: 300
                          text: "Clicca Button 4"
                      }
                      Button{
                          id: button5
                          anchors.top: button4.bottom
                          height: 300
                          text: "Clicca Button 5"
                      }
                      Button{
                          id: button6
                          anchors.top: button5.bottom
                          height: 300
                          text: "Clicca Button 6"
                      }
                      Button{
                          id: button7
                          anchors.top: button6.bottom
                          height: 300
                          text: "Clicca Button 7"
                      }
                      Layout.fillWidth: true
                      Layout.fillHeight: true
      
                      ScrollBar.vertical: ScrollBar {}
                  }
             }
      }
      
      
      

      I'm using a QWisget based application so I charge the qml in this way, just to be clear:

          QQuickView *rotella = new QQuickView();
          rotella->setResizeMode(QQuickView::SizeRootObjectToView);
          QWidget *container = QWidget::createWindowContainer(rotella, ui->page_3);
          container->setFocusPolicy(Qt::TabFocus);
          rotella->setSource(QUrl("qrc:/List.qml"));
          container->setGeometry(0,0, width, height);
          rotella->showMaximized();
      

      The resul is this one:
      0_1549619091721_Cattura66.PNG

      What I'm trying to do is to scroll so that I can see also the other buttons.

      Can anyone please help me?
      Thanks in advance!

      J Offline
      J Offline
      J.Hilk
      Moderators
      wrote on 8 Feb 2019, 10:01 last edited by J.Hilk 2 Aug 2019, 10:03
      #2

      hi @davidesalvetti

      your buttons are not part of the listview, they way you wrote it, they are children of the listview but not the model -> Flickable will not effect them.

      I suggest the following:

      Rectangle{
             color: "red"
      
              ListView{
                  id: list
                  anchors.fill: parent
      
                  flickableDirection: Flickable.VerticalFlick
                  boundsBehavior: Flickable.StopAtBounds
                  interactive: true
                 
                  model: 7
      
                  delegate:
                      Button{
                          width:  list.width/2
                          height: 300
                          text: "Clicca Button " + (index +1)
                      }
              }
          }
      

      Be aware of the Qt Code of Conduct, when posting : https://forum.qt.io/topic/113070/qt-code-of-conduct


      Q: What's that?
      A: It's blue light.
      Q: What does it do?
      A: It turns blue.

      1 Reply Last reply
      1
      • D Offline
        D Offline
        davidesalvetti
        wrote on 8 Feb 2019, 10:22 last edited by
        #3

        Thank you, that was the problem. It works now! thanks again.

        1 Reply Last reply
        1

        1/3

        8 Feb 2019, 09:45

        • Login

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