可滑动滚动条出现故障答案

【问题标题】：Flickable scrollbar malfunctioning可滑动滚动条出现故障
【发布时间】：2021-08-30 18:58:35
【问题描述】：

我在 flickable 中创建了一个 TextArea，当我添加大量换行符时，该区域会按预期滚动。但是，尽管当我输入的行数超过可用高度时会出现滚动条，但如果我尝试拖动滚动条，它会重置为全彩色（没有可拖动的内容）并且通常行为不端。

我的滚动条出了什么问题？

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    id: box
    width: 640
    height: 180
    visible: true
    title: qsTr("ScrollBar Mystery")

    Flickable {
        id: inputWrapper
        anchors.fill: parent

        ScrollBar.vertical: ScrollBar {
            id: scrollBar
            policy: ScrollBar.AlwaysOn
            anchors.left: box.right
        }
        Keys.onUpPressed: scrollBar.decrease()
        Keys.onDownPressed: scrollBar.increase()

        clip: true
         flickableDirection: Flickable.VerticalFlick
        function ensureVisible(r)
        {
            if (contentX >= r.x)
                contentX = r.x;
            else if (contentX+width <= r.x+r.width)
                contentX = r.x+r.width-width;
            if (contentY >= r.y)
                contentY = r.y;
            else if (contentY+height <= r.y+r.height)
                contentY = r.y+r.height-height;
        }
        TextEdit {
            id: input
            anchors.fill: parent
            text: ""
            focus: true
            wrapMode: TextEdit.Wrap
            onCursorRectangleChanged: inputWrapper.ensureVisible(cursorRectangle)
        }  // TextEdit
    }  // Flickable
}  // Window

【问题讨论】：

Box 和 cursorRectangle 是什么？请举一个可以编译测试的例子。
CursorRectangle 是 TextEdit 的一个属性：doc.qt.io/qt-5/qml-qtquick-textinput.html#cursorRectangle-prop。 Box 只是我将其放入的父框，但您可以放入自己的对象中
我替换为一个完整的工作示例
谢谢@TSG，检查答案对我有用

标签： qml scrollbar flickable

【解决方案1】：

您忘记设置contentHeight 和contentWidth

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12

Window {
    id: box
    width: 640
    height: 180
    visible: true
    title: qsTr("ScrollBar Mystery")

    Flickable {
        id: inputWrapper
        anchors.fill: parent
        contentHeight: input.implicitHeight
        contentWidth:  input.implicitWidth

        ScrollBar.vertical: ScrollBar {
            id: scrollBar
            policy: ScrollBar.AlwaysOn
            anchors.left: box.right
        }
        Keys.onUpPressed: scrollBar.decrease()
        Keys.onDownPressed: scrollBar.increase()

        clip: true
         flickableDirection: Flickable.VerticalFlick
        function ensureVisible(r)
        {
            if (contentX >= r.x)
                contentX = r.x;
            else if (contentX+width <= r.x+r.width)
                contentX = r.x+r.width-width;
            if (contentY >= r.y)
                contentY = r.y;
            else if (contentY+height <= r.y+r.height)
                contentY = r.y+r.height-height;
        }
        TextEdit {
            id: input
            anchors.fill: parent
            text: ""
            focus: true
            wrapMode: TextEdit.Wrap
            onCursorRectangleChanged: inputWrapper.ensureVisible(cursorRectangle)
        }  // TextEdit
    }  // Flickable
}  // Window

【讨论】：

这行得通，所以我会接受它。只是要向其他人指出，如果您的 flickable 没有填充到父级，您会在滚动条中遇到绑定错误。解决方法是设置 x/y/height/width 然后滚动条起作用。