Results 1 to 3 of 3

Thread: ListView overscrolling

  1. #1
    Join Date
    Feb 2011
    Posts
    354
    Thanks
    17
    Thanked 26 Times in 23 Posts
    Qt products
    Qt4 Qt5
    Platforms
    MacOS X Windows

    Default ListView overscrolling

    There is a QML application showing the list of items by means of ListView component:
    listview.jpg

    When ListView is scrolled its content often goes beyond the borders:
    listview-overscrolled.jpg

    I thought it could be adjusted by setting boundsBehavior to Flickable.StopAtBounds, but although I have done that, it still behaves like it is shown above.

    The code is quite simple:
    Qt Code:
    1. import QtQuick 2.0
    2. import QtQuick.Controls 2.0
    3.  
    4. Rectangle
    5. {
    6. color: "gray"
    7.  
    8. Rectangle
    9. {
    10. color: "blue"
    11. border.color: "orange"
    12. anchors { fill: parent; margins: 50 }
    13.  
    14. ListView
    15. {
    16. anchors { fill: parent; margins: parent.border.width }
    17. boundsBehavior: Flickable.StopAtBounds
    18. //snapMode: ListView.SnapOneItem
    19. //snapMode: ListView.SnapToItem
    20. //preferredHighlightBegin: 0
    21. //preferredHighlightEnd: 0
    22. //highlightRangeMode: ListView.StrictlyEnforceRange
    23. //cacheBuffer: 200
    24. model: [ "What", "a", "hell", "is", "wrong", "with", "you?"]
    25. delegate: Item
    26. {
    27. height: 150
    28. width: parent.width
    29. Rectangle
    30. {
    31. anchors.fill: parent
    32. color: "lightgray"
    33. Text { text: modelData; font.pixelSize: 50 }
    34. }
    35. } // delegate
    36.  
    37. //ScrollBar.vertical: ScrollBar {}
    38. } // ListView
    39. } // Rectangle (listview border)
    40. } // Rectangle (main)
    To copy to clipboard, switch view to plain text mode 

    Any ideas?
    Magicians do not exist

  2. #2
    Join Date
    May 2011
    Posts
    77
    Thanks
    6
    Thanked 5 Times in 4 Posts
    Qt products
    Qt4
    Platforms
    MacOS X Unix/X11

    Default Re: ListView overscrolling

    I've been able to keep this from happening by putting the ListView inside a Flickable:

    Qt Code:
    1. Flickable {
    2. height: parent.height
    3. anchors.top: parent.top
    4. anchors.topMargin: Funcs.psize(4,parent.height)
    5. anchors.left: parent.left
    6. anchors.leftMargin: Funcs.psize(2,parent.width)
    7. anchors.right: parent.right
    8. anchors.rightMargin: Funcs.psize(2,parent.width)
    9. anchors.bottom: parent.bottom
    10. anchors.bottomMargin: Funcs.psize(4,parent.height)
    11.  
    12. ListView {
    13. id: boatList
    14. anchors.fill: parent
    15.  
    16. Component {
    17. id: boatDelegate
    18. Item {
    19. id: container
    20. width: parent.width
    21. height: Funcs.pointHeight(14)
    22. Column {
    23. Text {
    24. font.pointSize: Funcs.fontHeight(24)
    25. text: boatName
    26. horizontalAlignment: Text.AlignHCenter
    27. color: "red"
    28. }
    29. }
    30.  
    31. MouseArea {
    32. id: mouseArea
    33. anchors.fill: parent
    34. hoverEnabled: true
    35. onClicked: {
    36. boatList.currentIndex = index;
    37. boatList.positionViewAtIndex(index,ListView.Center);
    38. }
    39. }
    40. }
    41. }
    42.  
    43. model: appWin.boatModel
    44. delegate: boatDelegate
    45. highlight: Rectangle { color: "lightsteelblue"; radius: 5 }
    46. highlightFollowsCurrentItem: true
    47. highlightMoveDuration: 250
    48. highlightMoveVelocity: 50
    49. focus: true
    50. spacing: Funcs.pointHeight(6)
    51. clip: true
    52. currentIndex: -1
    53. onCurrentItemChanged: {
    54. appWin.myBoatName = boatModel.get(boatList.currentIndex).boatName;
    55. appWin.myBID = boatModel.get(boatList.currentIndex).boatID;
    56. }
    57. }
    58. }
    To copy to clipboard, switch view to plain text mode 

  3. #3
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,420
    Thanks
    37
    Thanked 1,545 Times in 1,495 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: ListView overscrolling

    The original code is missing the "clip: true", so items are drawn partially outside if they are also partially inside the view.

    Cheers,
    _

  4. The following user says thank you to anda_skoa for this useful post:

    mentalmushroom (18th August 2016)

Similar Threads

  1. Replies: 2
    Last Post: 17th May 2016, 00:50
  2. ListView - ListView communication
    By MarkoSan in forum Qt Quick
    Replies: 1
    Last Post: 30th October 2015, 11:18
  3. listview
    By ganeshgladish in forum Newbie
    Replies: 1
    Last Post: 23rd June 2013, 11:51
  4. should i use listview ?
    By rimie23 in forum Qt Programming
    Replies: 20
    Last Post: 9th May 2012, 23:40
  5. qml listview
    By Le_B in forum Qt Quick
    Replies: 1
    Last Post: 25th May 2011, 14:01

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.