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
Whyparent: 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... -
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.