可滑动滚动条出现故障

Question

我在 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

Answer 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 scrollbar malfunctioning

qml

scrollbar

flickable