首页 文章

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

提问于
浏览 次
0

问题在于水平滚动条的位置和宽度以及当我在RTL方向上调整窗口（父）元素的宽度时滚动的内容的位置 .

当我执行这些步骤时：

  • 在LTR方向上调整窗口宽度 .

  • 一切都很好 .

  • 将滚动条位置更改为与0.0不同的任何其他位置（例如将其一直移动到右侧）

  • 以相反（RTL）方向调整窗口宽度

  • Scrollbar开始表现奇怪，可滚动内容处于错误位置

我得到这种情况：

错误地计算了

  • 滚动条的宽度's contentItem (aka scrollbar' s句柄 .

  • 滚动条的位置也被错误计算

  • 内容未滚动到正确的位置（错误地计算了可滚动内容的属性"x"）

我想要的是：

  • 滚动条的宽度's contentItem (aka scrollbar' s句柄）随着窗口宽度的增加而成比例增加

  • 内容（位于其右侧完全可见的位置）应保持在该位置 . 随着窗口的扩展，在左侧，内容的另一部分在此之前不可见，应该开始出现 .

如果我尝试使用非附加的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"
            }
        }
    }
}

滚动条行为

qt qml scrollbar qtquickcontrols2

1 回答

  • 0

    您应该考虑使用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
            }
        }

    }

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

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

    同

    ScrollBar {
    visible: frame.width < content.width
    // ...
}
    回复于

相关问题