qmlscrollbarflickable

Flickable scrollbar malfunctioning


I have created a TextArea inside a flickable, and when I add lots of newlines the area scrolls as expected. However, although a scrollbar appears when I type more lines than the available height, if I try to drag the scrollbar it resets to fully colored (nothing to drag) and just generally misbehaves.

What is wrong with my scrollbar?

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

Solution

  • you forget to set contentHeight and 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
    

    enter image description here