QML - Scroll bar size and position fail to 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 might 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's what I have:
main.qml
```
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12
import QtQuick.Shapes 1.15Window { id: main_window width: 640 height: 480 visible: true title: qsTr("Hello World") color: 'light blue' // container ColumnLayout { id: my_column anchors.centerIn: parent width: main_window.width / 3 height: main_window.height / 3 spacing: 0 // contents ColumnLayout { id: repeater_element Layout.fillWidth: true Layout.fillHeight: false spacing: 4 Repeater { model: 7 Rectangle { Layout.fillWidth: true Layout.fillHeight: false Layout.preferredHeight: 75 Layout.alignment: Qt.AlignTop color: 'red' } } transform: Translate { id: rect_translate y: 0 } } } // scroll bar type Scroll_Bar { x: 0 y: 0 height: parent.height width: 20 container_element: my_column content_element: repeater_element translate_element: rect_translate orientation: Qt.Vertical } // just a border for the container element Shape { ShapePath { strokeWidth: 4 strokeColor: "black" fillColor: Qt.rgba(.09, .05, .86, 0) joinStyle: ShapePath.MiterJoin startX: my_column.x startY: my_column.y PathLine { relativeX: my_column.width relativeY: 0 } PathLine { relativeX: 0 relativeY: my_column.height } PathLine { relativeX: -my_column.width relativeY: 0 } PathLine { relativeX: 0 relativeY: -my_column.height } } } }
Scroll_Bar.qml ``` import QtQuick 2.0 import QtQuick.Controls 2.5 ScrollBar { property var container_element property var content_element property var translate_element QtObject { id: internal property real vertical_size: container_element.height / content_element.height property real horizontal_size: container_element.width / content_element.width property real off_the_bottom: (content_element.height - container_element.height) + translate_element.y } id: scroll_bar_element hoverEnabled: true active: size orientation: orientation size: orientation === Qt.Vertical ? internal.vertical_size : internal.horizontal_size padding: 0 contentItem: Rectangle { id: ci radius: 0 color: 'blue' } onSizeChanged: { if(size > 1){ visible = false } else{ visible = true } } onPositionChanged: { if (orientation === Qt.Horizontal) { translate_element.x = -scroll_bar_element.position * content_element.width } else { translate_element.y = -scroll_bar_element.position * content_element.height } } Component.onCompleted: { scroll_bar_element.onPositionChanged() } }