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
QtWS25 Last Chance

Problems with ListView Scroll

Scheduled Pinned Locked Moved Solved QML and Qt Quick
3 Posts 2 Posters 966 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 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.HilkJ 1 Reply Last reply
    0
    • D davidesalvetti

      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.HilkJ Offline
      J.HilkJ Offline
      J.Hilk
      Moderators
      wrote on last edited by J.Hilk
      #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 last edited by
        #3

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

        1 Reply Last reply
        1

        • Login

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