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. How to increase the "scrolling height" of a Qml ListView?
QtWS25 Last Chance

How to increase the "scrolling height" of a Qml ListView?

Scheduled Pinned Locked Moved Solved QML and Qt Quick
listviewflickableqmlquick
13 Posts 6 Posters 4.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.
  • D Offline
    D Offline
    daljit97
    wrote on 12 Jul 2018, 00:21 last edited by daljit97 7 Dec 2018, 00:22
    #1

    So I have got a qml ListView and the bottom of the list I have got a little banner that is visible at all times. Now this works fine, but when I scroll the list to the end the bottom of the list is obviously covered by the banner. How can increase the amount of "scrolling height" so that the user is able to scroll further until the list is completely visible?

    ListView{
        id: lisView
        anchors.fill: parent
    }
    Banner{
        id: banner
        width: listView.width/2
        anchors.bottom: parent.bottom
    }
    
    1 Reply Last reply
    0
  • D Offline
    D Offline
    DavidM29
    wrote on 12 Jul 2018, 05:56 last edited by DavidM29 7 Dec 2018, 07:06
    #2

    You can put your ListView into a Rectangle or an Item with the size of your available space.

    Here is an example :

        Rectangle{ // Can be replace with Item 
            id: lisView
            height: parent.height-banner.height  // Make sure to set height or width or you could lose the scroll
            width: parent.width
            ListView{ // Your ListView you can put what you want in it
                spacing : 2
                model : 30
                delegate: Rectangle {
                    height: 20
                    width: 50
                    border.color: "black"
                    border.width: 1
                    color: "blue"
                }
                anchors.fill: parent
            }
        }
        Rectangle{  // did not have your banner component so I replaced it with a rectangle but the idea is the same
            id: banner
            width: parent.width
            height: 50
            opacity: 0.4 //Set the opacity to make sure their is no more elements to show on the bottom of the ListView
            anchors.bottom: parent.bottom
        }
    

    Hope this help

    1 Reply Last reply
    0
  • D Offline
    D Offline
    daljit97
    wrote on 12 Jul 2018, 13:18 last edited by
    #3

    The problem is that I want my list to visible behind the banner (which is transparent). Your solution would constrain me to make the list on top of the banner.

    1 Reply Last reply
    0
  • O Offline
    O Offline
    ODБOï
    wrote on 12 Jul 2018, 13:25 last edited by ODБOï 7 Dec 2018, 16:42
    #4
    This post is deleted!
    1 Reply Last reply
    0
    • D Offline
      D Offline
      DavidM29
      wrote on 12 Jul 2018, 13:26 last edited by DavidM29 7 Dec 2018, 13:34
      #5

      I don't really understand what you mean.

      Can you please make a screenshot of your problem and draw what you are expecting ?

      Here is what I did :
      0_1531401804196_2eced7cd-c0c9-4ee1-807c-1c2b305441b7-image.png

      Here is what it looks like without adapting your list in a Rectangle :
      0_1531401949159_cc51b3be-1c05-46b6-9d43-edaab8487311-image.png

      Here with the banner on top of the listView :
      0_1531402450199_67f7a938-4f3b-4f3c-bba6-7cad5ae3f4c2-image.png

      I don't really get what is wrong

      1 Reply Last reply
      0
    • V Offline
      V Offline
      VRonin
      wrote on 12 Jul 2018, 13:28 last edited by
      #6

      Can you layout the banner below the view rather than on top?

      "La mort n'est rien, mais vivre vaincu et sans gloire, c'est mourir tous les jours"
      ~Napoleon Bonaparte

      On a crusade to banish setIndexWidget() from the holy land of Qt

      1 Reply Last reply
      0
    • D Offline
      D Offline
      daljit97
      wrote on 12 Jul 2018, 16:31 last edited by
      #7

      @DavidM29 So what I want is the list to be partial visible behind the transparent banner (like in your 2nd screenshot), however when the user scrolls up they are able to scroll until the content of the ListView sits on top of the banner.

      1 Reply Last reply
      0
    • S Offline
      S Offline
      shaan7
      wrote on 12 Jul 2018, 17:37 last edited by
      #8

      @daljit97 have you explored the footer and footerPositioning properties of ListView?

      D 1 Reply Last reply 12 Jul 2018, 22:30
      0
    • D Offline
      D Offline
      daljit97
      replied to shaan7 on 12 Jul 2018, 22:30 last edited by
      #9

      @shaan7 The problem is this a banner that needs to visible in the entire application so it cannot be attached to the ListView

      1 Reply Last reply
      0
    • G Offline
      G Offline
      GrecKo Qt Champions 2018
      wrote on 12 Jul 2018, 22:50 last edited by GrecKo 7 Dec 2018, 22:58
      #10

      Add bottomMargin: banner.height to your ListView

      EDIT: and as @shaan7 said, a footer with a z: 2 and footerPositioning: ListView.OverlayFooter works too.

      D 1 Reply Last reply 13 Jul 2018, 16:48
      0
    • D Offline
      D Offline
      daljit97
      replied to GrecKo on 13 Jul 2018, 16:48 last edited by
      #11

      @GrecKo setting the bottomMargin will make the view sit on top of the banner. I want the list to be behind the transparent banner and when the user is nearly at the end they can scroll the content above the bannner

      G 1 Reply Last reply 13 Jul 2018, 19:45
      0
    • G Offline
      G Offline
      GrecKo Qt Champions 2018
      replied to daljit97 on 13 Jul 2018, 19:45 last edited by
      #12

      @daljit97 said in How to increase the "scrolling height" of a Qml ListView?:

      @GrecKo setting the bottomMargin will make the view sit on top of the banner.

      No, it has nothing to do with that.
      Just place the banner on top of your ListView's delegate.
      If your banner is a child of your ListView, set z: 2.
      If it's a sibling of the ListView, declare it after or with a higher z.

      See http://doc.qt.io/qt-5/qml-qtquick-item.html#z-prop and http://doc.qt.io/qt-5/qml-qtquick-listview.html#stacking-order-in-listview

      1 Reply Last reply
      1
    • D Offline
      D Offline
      daljit97
      wrote on 13 Jul 2018, 20:00 last edited by
      #13

      @GrecKo oh thank you very much. I confused bottomMargin for anchors.bottomMargin. I wasn't aware of this property being available. This is exactly what I needed!

      1 Reply Last reply
      0

    9/13

    12 Jul 2018, 22:30

    topic:navigator.unread, 4
    • Login

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