Results 1 to 2 of 2

Thread: QML Scroll Bar doesn't update when it is at the bottom and window height is resized

  1. #1
    Join Date
    Mar 2021
    Posts
    1
    Qt products
    Qt5
    Platforms
    MacOS X Windows Android

    Default QML Scroll Bar doesn't update when it is at the bottom and window height is resized

    I have a custom scrollbar QML type that I am working on. The problem I'm having is that if the scroll bar is all the way at the bottom of the page and the height of the main application window is increased, the translated contents stay in place and the size of the scroll bar is not updated. After this window resize occurs, clicking on the scroll bar causes the content to snap to its proper place and the scroll bar to snap to its proper size. What changes could be made to the code below so the position of the contents (red blocks) and scroll bar size update while the window height is changing, not afterwards when the scroll bar has been clicked again. To see the issue just open the code below, scroll the blue scroll bar all the way to the bottom, increase the height of the main window (observing the scroll bar size and the content position), and then click on the scroll bar after the resize. Here is my code:

    main.qml

    Qt Code:
    1. import QtQuick 2.12
    2. import QtQuick.Window 2.12
    3. import QtQuick.Layouts 1.12
    4. import QtQuick.Shapes 1.15
    5.  
    6.  
    7. Window {
    8. id: main_window
    9. width: 640
    10. height: 480
    11. visible: true
    12. title: qsTr("Hello World")
    13. color: 'light blue'
    14.  
    15. // container
    16. ColumnLayout {
    17. id: my_column
    18. anchors.centerIn: parent
    19. width: main_window.width / 3
    20. height: main_window.height / 3
    21. spacing: 0
    22.  
    23. // contents
    24. ColumnLayout {
    25. id: repeater_element
    26. Layout.fillWidth: true
    27. Layout.fillHeight: false
    28. spacing: 4
    29. Repeater {
    30. model: 7
    31. Rectangle {
    32. Layout.fillWidth: true
    33. Layout.fillHeight: false
    34. Layout.preferredHeight: 75
    35. Layout.alignment: Qt.AlignTop
    36. color: 'red'
    37. }
    38. }
    39. transform: Translate {
    40. id: rect_translate
    41. y: 0
    42. }
    43. }
    44. }
    45.  
    46. // scroll bar type
    47. Scroll_Bar {
    48. x: 0
    49. y: 0
    50. height: parent.height
    51. width: 20
    52. container_element: my_column
    53. content_element: repeater_element
    54. translate_element: rect_translate
    55. orientation: Qt.Vertical
    56. }
    57.  
    58. // just a border for the container element
    59. Shape {
    60. ShapePath {
    61. strokeWidth: 4
    62. strokeColor: "black"
    63. fillColor: Qt.rgba(.09, .05, .86, 0)
    64. joinStyle: ShapePath.MiterJoin
    65. startX: my_column.x
    66. startY: my_column.y
    67.  
    68. PathLine {
    69. relativeX: my_column.width
    70. relativeY: 0
    71. }
    72.  
    73. PathLine {
    74. relativeX: 0
    75. relativeY: my_column.height
    76. }
    77.  
    78. PathLine {
    79. relativeX: -my_column.width
    80. relativeY: 0
    81. }
    82.  
    83. PathLine {
    84. relativeX: 0
    85. relativeY: -my_column.height
    86. }
    87. }
    88. }
    89. }
    To copy to clipboard, switch view to plain text mode 

    Scroll_Bar.qml

    Qt Code:
    1. import QtQuick 2.0
    2. import QtQuick.Controls 2.5
    3.  
    4. ScrollBar {
    5. property var container_element
    6. property var content_element
    7. property var translate_element
    8.  
    9. QtObject {
    10. id: internal
    11. property real vertical_size: container_element.height / content_element.height
    12. property real horizontal_size: container_element.width / content_element.width
    13. property real off_the_bottom: (content_element.height - container_element.height) + translate_element.y
    14. }
    15.  
    16. id: scroll_bar_element
    17. hoverEnabled: true
    18. active: size
    19. orientation: orientation
    20. size: orientation === Qt.Vertical ? internal.vertical_size : internal.horizontal_size
    21. padding: 0
    22. contentItem: Rectangle {
    23. id: ci
    24. radius: 0
    25. color: 'blue'
    26. }
    27.  
    28. onSizeChanged: {
    29. if(size > 1){
    30. visible = false
    31. }
    32. else{
    33. visible = true
    34. }
    35. }
    36.  
    37. onPositionChanged: {
    38. if (orientation === Qt.Horizontal) {
    39. translate_element.x = -scroll_bar_element.position * content_element.width
    40. } else {
    41. translate_element.y = -scroll_bar_element.position * content_element.height
    42. }
    43. }
    44.  
    45. Component.onCompleted: {
    46. scroll_bar_element.onPositionChanged()
    47. }
    48. }
    To copy to clipboard, switch view to plain text mode 

  2. #2
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    4,972
    Thanks
    277
    Thanked 808 Times in 797 Posts
    Qt products
    Qt5
    Platforms
    Windows Android

    Default Re: QML Scroll Bar doesn't update when it is at the bottom and window height is resiz

    Don't know much about QML, but I do see that on line 47 of the first code post, you have something called "Scroll_Bar" while in the second post, line 4 contains something else named "ScrollBar". I don't see where either one of them references the other.
    <=== The Great Pumpkin says ===>
    Please use CODE tags when posting source code so it is more readable. Click "Go Advanced" and then the "#" icon to insert the tags. Paste your code between them.

Similar Threads

  1. Replies: 2
    Last Post: 14th October 2016, 10:55
  2. Replies: 7
    Last Post: 24th June 2016, 10:52
  3. QPlainTextEdit scroll to bottom
    By vrltwe in forum Newbie
    Replies: 1
    Last Post: 15th August 2014, 21:44
  4. Replies: 9
    Last Post: 31st July 2010, 19:21
  5. QMdiSubWindow problem with resized window
    By estanisgeyer in forum Qt Programming
    Replies: 2
    Last Post: 7th January 2008, 14:39

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.