Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

ScrollBars show, but don't move



  • 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
    
    }
    
    


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



  • 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.



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



  • Mouse or touch? Which Qt version?



  • 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
    
    }
    


  • 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.


Log in to reply