ScrollBars show, but don't move

igor_stravinsky

I'm using QtQuick Controls 2, and have a column of text in a flickable that I'm trying to control with a pair of scrollbars.

The scrollbars are setting up correctly, but they appear unresponsive when the UI is first shown. Log messages show that the y position of the content is changing, so it's as if the scroll messages aren't being received by the Flickable.

Interestingly, if I put this code in a tab view, and switch tabs and come back to the flickable view, then the scroll bars respond as expected.

Has anyone seen this behavior before? Is this a known bug? Is there some special sauce needed to get scroll bars to respond on launch?

import QtQuick 2.6
import QtQuick.Controls 2.0
import QtQuick.Window 2.2

Rectangle{
    id:one
    opacity: 0
    anchors.fill:parent

    Flickable{
        id:theFlickable
        //anchors.fill:parent
        width: parent.width
        height: parent.height
        contentHeight: theColumn.height
        contentWidth: theColumn.width
        clip: true

        Component.onCompleted: {
            console.log("content height=",theColumn.height,"flickable height=",theFlickable.height)
        }

        onContentYChanged: {
            console.log("content y=",contentY)
        }

        Column{
            id:theColumn

            Text{
                anchors.horizontalCenter: parent.horizontalCenter
                text:"one"
                font.pointSize: 1000
                font.family: "helvetica"
            }

            Text{
                anchors.horizontalCenter: parent.horizontalCenter
                text:"one"
                font.pointSize: 1000
                font.family: "helvetica"
            }

            Text{
                anchors.horizontalCenter: parent.horizontalCenter
                text:"one"
                font.pointSize: 100
                font.family: "helvetica"
            }

            Text{
                anchors.horizontalCenter: parent.horizontalCenter
                text:"one"
                font.pointSize: 100
                font.family: "helvetica"
            }

            Text{
                anchors.horizontalCenter: parent.horizontalCenter
                text:"one"
                font.pointSize: 100
                font.family: "helvetica"
            }
            Text{
                anchors.horizontalCenter: parent.horizontalCenter
                text:"one"
                font.pointSize: 100
                font.family: "helvetica"
            }
            Text{
                anchors.horizontalCenter: parent.horizontalCenter
                text:"one"
                font.pointSize: 100
                font.family: "helvetica"
            }
            Text{
                anchors.horizontalCenter: parent.horizontalCenter
                text:"one"
                font.pointSize: 100
                font.family: "helvetica"
            }


        }
        // Attach scrollbars to the right and bottom edges of the view.

        ScrollBar.vertical: ScrollBar {
            id: verticalScrollBar
            anchors.top: parent.top
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            parent: theFlickable.parent
            //hoverEnabled: true
            //active: hovered || pressed
            policy: ScrollBar.AlwaysOn
            //orientation: Qt.Vertical
            //position:one.y
            ///size: one.height/ theColumn.height

//            onPressedChanged: {
//                console.log("vertical scroll bar pressed")
//            }
        }

        ScrollBar.horizontal: ScrollBar {
            id: horizontalScrollBar
            parent: theFlickable.parent
            //width: theFlickable.width-12; height: 12
            anchors.bottom: parent.bottom
            anchors.left: parent.left
            anchors.right: parent.right
            //hoverEnabled: true
            //active: hovered || pressed
            //orientation: Qt.Horizontal
            policy: ScrollBar.AlwaysOn
            //size: one.width/theColumn.width
        }
    }   //rectangle

}

Tirupathi Korla

@igor_stravinsky
Why parent: theFlickable.parent ?
Try removing it...

igor_stravinsky

Good catch. That was an artifact from a previous trial.

Unfortunately, removing that line didn't change the scrollBar behavior. According to debug statements, the y position of the flickable's content is changing when scroll bars are dragged, but as far as the user can see, neither the content, nor the scroll thumbs are moving.

Tirupathi Korla

@igor_stravinsky
You can use scrollview instead..
It automatically takes care of scroll bars...

jpnurmi

Mouse or touch? Which Qt version?

igor_stravinsky

I rebuilt using ScrollView. I've got the same issue with non-responsiveness on initial viewing.

I'll try to cook up a simple example.

I'm using Qt 5.10.0 on a Mac (thus a mouse-driven interface)

import QtQuick 2.6
import QtQuick.Controls 2.2
import QtQuick.Window 2.2

Rectangle{
    id:one
    opacity: 0
    anchors.fill:parent

    ScrollView{
        id:theScrollView
        anchors.fill:parent
        clip: true
        ScrollBar.vertical.policy: ScrollBar.AlwaysOn
        ScrollBar.horizontal.policy: ScrollBar.AlwaysOn

        Component.onCompleted: {
            console.log("content height=",theColumn.height,"scroll view height=",theScrollView.height)
        }


        Column{
            id:theColumn

            Text{
                anchors.horizontalCenter: parent.horizontalCenter
                text:"one"
                font.pointSize: 1000
                font.family: "helvetica"
            }

            Text{
                anchors.horizontalCenter: parent.horizontalCenter
                text:"one"
                font.pointSize: 1000
                font.family: "helvetica"
            }

            Text{
                anchors.horizontalCenter: parent.horizontalCenter
                text:"one"
                font.pointSize: 100
                font.family: "helvetica"
            }

            Text{
                anchors.horizontalCenter: parent.horizontalCenter
                text:"one"
                font.pointSize: 100
                font.family: "helvetica"
            }

            Text{
                anchors.horizontalCenter: parent.horizontalCenter
                text:"one"
                font.pointSize: 100
                font.family: "helvetica"
            }
            Text{
                anchors.horizontalCenter: parent.horizontalCenter
                text:"one"
                font.pointSize: 100
                font.family: "helvetica"
            }
            Text{
                anchors.horizontalCenter: parent.horizontalCenter
                text:"one"
                font.pointSize: 100
                font.family: "helvetica"
            }
            Text{
                anchors.horizontalCenter: parent.horizontalCenter
                text:"one"
                font.pointSize: 100
                font.family: "helvetica"
            }

        }//column

    }   //scroll view

}

igor_stravinsky

Ah. I just noticed that my ScrollView is inside a Rectangle, which has it's opacity set to 0 initially.

UsualIy programmatically set the opacity to 1 from another qml file on startup.

If, however, I set the opacity to 1 in the qml file, then ScrollView works as expected on startup.

Do I need to do something else programmatically when I change the opacity in order to get the ScrollView to work? It certainly seems as if opacity is tied to the ScrollView being active.