Search code examples
qmlscrollview

ScrollView that won't scroll

I have a flow which fills up well beyond the bottom of the screen. So I wrapped it in a ScrollView; however, I just can't make it work.

A (minor) problem is that setting contentWidth to anything other than parent.width causes the flow to show nothing. I should NOT have to set contentWidth/contentHeight since the scrollView contains a single item. (But not setting these causes an empty scrollView).

The major problem is that the view is not scrollable (once I have content showing). I can see content cutoff on the bottom, but I can't drag it up/down with my mouse, nor does a scrollbar appear. What is wrong?

Rectangle {
    anchors {
        top: buttons.bottom
        left: parent.left
        right: parent.right
        bottom: parent.bottom
    }
    ScrollView {
        clip: true
        contentHeight:  gatewayFlow.implicitHeight
        contentWidth:  parent.width // availableWidth // gatewayFlow.implicitWidth
        Flow {
            id: gatewayFlow
            anchors.fill: parent
            spacing: 10
            Gateway { }
            Gateway { }
            Gateway { }
            Gateway { }
            Gateway { }
            Gateway { }
            Gateway { }
            Gateway { }
            Gateway { }
        }  // Flow
    } // ScrollView
}  // Rectange
Solution

  • The issue is that your ScrollView will by default grow and shrink its width and height to match the content size if you haven't otherwise constrained them. And if the width and height match the content width and height you naturally won't get any scrolling.

    Add this to ScrollView to constrain it and get actual scroll behavior of the content:

        anchors.fill: parent