Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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.15

    Window {
        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()
            }
        }
    

Log in to reply