当我从 RTL 调整父元素大小时，非附加水平 QML ScrollBar（和 ScrollIndicator）的宽度和位置错误

Question

当我在 RTL 方向上调整 window（父）元素的宽度时，问题出在水平滚动条的位置和宽度以及已滚动内容的位置。

当我执行这些步骤时：

调整 LTR 方向 window 的宽度。
一切正常。
将滚动条位置更改为不同于 0.0 的任何其他位置，（例如将其一直移动到右侧）
在相反 (RTL) 方向调整 window 的宽度
滚动条开始出现异常，可滚动内容的位置不正确

我遇到这种情况：

滚动条的 contentItem（又名滚动条的句柄）的宽度计算错误。
滚动条的位置也计算错误
内容未滚动到正确位置（属性 "x" 可滚动内容计算错误）

我想要的是：

滚动条的 contentItem（又名滚动条的句柄）的宽度随着 window 的宽度增加而按比例增加
内容（位于其右侧完全可见的位置）应保留在该位置。随着 window 的扩展，在左侧，之前不可见的另一部分内容应该开始显示了。

如果我尝试使用非附加的 QML ScrollIndicator，也会发生同样的事情。

这似乎是 QML 中的错误，我已经报告了它，但我现在需要解决方案...如果有人能提供帮助，那就太好了。谢谢！

import QtQuick 2.7
import QtQuick.Window 2.2
import QtQuick.Controls 2.3

Window
{
    id: main

    width: 400
    height: 200

    Rectangle 
    {
        id: frame
        clip: true
        anchors.fill: parent
        color: "purple"

        Text 
        {
            id: content
            text: "ABCDE"
            font.pixelSize: 160
            x: -hbar.position * width
        }

        ScrollBar 
        {
            id: hbar
            hoverEnabled: true
            active: true
            policy: ScrollBar.AlwaysOn
            visible: size < 1
            orientation: Qt.Horizontal
            size: frame.width / content.width
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom

            background: Rectangle 
            {
                color: "black"
            }
        }
    }
}

滚动条行为

Answer 1

您应该考虑使用 Flickable 而不是手动设置文本的位置：

Flickable {
        anchors.fill: parent
        contentWidth: content.paintedWidth
        boundsBehavior: Flickable.StopAtBounds

        ScrollBar.horizontal: ScrollBar {
            hoverEnabled: true
            active: true
            policy: ScrollBar.AlwaysOn
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            background: Rectangle {
                color: "black"
            }
        }

        Rectangle {
            id: frame
            clip: true
            anchors.fill: parent
            color: "purple"

            Text {
                id: content
                text: "ABCDE"
                font.pixelSize: 160
            }
        }

    }

编辑：如果您确实需要将 ScrollBar 附加到 Rectangle，您可以将边界添加到 Text 位置：

x: Math.min(0, Math.max(-hbar.position * width, frame.width - content.width))

和

ScrollBar {
    visible: frame.width < content.width
    // ...
}

当我从 RTL 调整父元素大小时，非附加水平 QML ScrollBar（和 ScrollIndicator）的宽度和位置错误

Wrong width and position of non-attached horizontal QML ScrollBar (and ScrollIndicator) when I resize parent element from RTL

qt

scrollbar

qml

qtquickcontrols2