Flickable and ScrollBar not working as desired

mzimmers

Hi all -

I'm having problems properly setting the height of a Flickable, and as a result (I think) the ScrollBar isn't working correctly.

I've cut the code down as much as possible:

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import colors.stylesheet

Column {
    id: mainGrid

    RowLayout {
        id: sliderRow
        Layout.fillHeight: true
        Layout.fillWidth: true

        Repeater {
            model: 4
            Tileslider { descrip: "slider " + index }
        }
    }

    Flickable {
        id: flickable

        height: gridEquipment.height // WRONG
        width: gridEquipment.width // WRONG

        ScrollBar.vertical: ScrollBar {
            orientation: Qt.Vertical
            policy: ScrollBar.AlwaysOn
        }

        GridLayout {
            id: gridEquipment

            rows: 3
            columns: 4

            Repeater {
                model: 8
                Tileicon { titleText: "tile " + index }
            }
        }
    }
}

And I'm getting this:

So, the question is, how do I correctly set the height of the Flickable? The main window height is fixed, as are the tab bar and the area reserved for filters.

EDIT:

In case it isn't clear, that pic is my entire display window. I need the entire scrollbar visible.

Thanks...

mzimmers

BTT.

I've created a simpler example, that shows a similar problem. With this code:

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {
    visible: true
    width: 800
    height: 480

//    Flickable {
    ScrollView {
    anchors.fill: parent
        ColumnLayout {
            Rectangle { id: r1; width: 100; height: 600; color: "yellow"; Text { text: "xxx" } }
            Rectangle { id: r2; width: 100; height:  24; color: 'gray';   Text { text: "yyy" } }
        }
        ScrollBar {
            orientation: Qt.Vertical
            anchors {top: parent.top; right: parent.right; bottom: parent.bottom }
        }
    }
}

I get this:

Moving the scrollbar doesn't change the view. I'd expect eventually to get to the bottom of the yellow rectangle and see the gray one. How is that the scrollbar isn't affecting the contents of the Scrollview/Flickable (I've tried both)?

Thanks...

mzimmers

I got it working. There were a few things wrong with my original example, but the main problem was I needed to declare the scrollbar differently:

    Flickable {
        id: flickable

        Layout.fillHeight: true
        Layout.fillWidth: true
        clip: true
        contentHeight: equipmentGrid.height

        GridLayout {
            id: equipmentGrid
            ...
        }

        ScrollBar.vertical: ScrollBar {
            policy: ScrollBar.AsNeeded
        }
    }
}

Once I got the scroll bar operational, I needed to add the "clip: true" in order to prevent the flickable from scrolling up over items above the GridLayout.