QML 滾動條位於底部且 window 高度已調整大小時不更新

Question

我有一個正在處理的自定義滾動條 QML 類型。 我遇到的問題是，如果滾動條一直位於頁面底部並且主應用程序 window 的高度增加，則翻譯后的內容保持不變並且滾動條的大小不會更新。 在發生此 window 大小調整后，單擊滾動條會導致內容對齊到正確的位置，並且滾動條會對齊到正確的大小。 可以對下面的代碼進行哪些更改，以便在 window 高度發生變化時，內容（紅色塊）和滾動條大小的 position 會更新？ 之后再次單擊滾動條時不會。 看問題只要打開下面的代碼，將藍色滾動條一直滾動到底部，增加主window的高度（觀察滾動條大小和內容位置），然后點擊滾動條后面的調整大小。 這是我的代碼：

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

Answer 1

您幾乎無法編寫比現有滾動條更好的滾動條，因此我編寫了以下代碼，它與您在示例中看到的相同。 ScrollBar 可以是 flickable 的兄弟，因此它不會獲得所有權，您可以 position 在您想要的地方使用它。 你甚至可以讓它旋轉。

它可以解決您的問題嗎？

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.12

Window {
    id: main_window
    width: 640
    height: 480
    visible: true
    title: qsTr("Hello World")
    color: 'light blue'

    Flickable {
        id: flickable
        anchors.centerIn: parent
        width: main_window.width / 3
        height: main_window.height / 3

        contentWidth: repeater_element.width
        contentHeight: repeater_element.height

        ScrollBar.vertical: scrollBar

        // container
        ColumnLayout {
            id: my_column
            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
                }
            }
        }
    }

    ScrollBar {
        id: scrollBar
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.bottom: parent.bottom

        //try this for fun
        //rotation: 5

        contentItem: Rectangle {
            implicitWidth: 20
            implicitHeight: 20
            color: "blue"
        }
    }

    Rectangle {
        color: "transparent"
        border.width: 4
        anchors.fill: flickable
    }
}