Flickable above and below others QML types

[deleted357]

Hi,

As you can see on the pictures below, the Flickable type pass above the title and below the buttons at the bottom. I don't understand why! Any idea?

The code:

import QtQuick 2.9
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

Page {

    Loader {
        id: titre
        anchors {
            top: parent.top
            topMargin: 10
            left: parent.left
            leftMargin: 10
            right: parent.right
            rightMargin: 10
        }
        source: "TitreLabel.qml"
    }

    Flickable {
        interactive: true
        anchors {
            top: titre.bottom
            topMargin: 10
            bottom: fButtons.top
            bottomMargin: 10
            left: parent.left
            leftMargin: 10
            right: parent.right
            rightMargin: 10
        }
        boundsBehavior: Flickable.StopAtBounds
        flickableDirection: Flickable.AutoFlickDirection
        contentHeight: column.implicitHeight

        ColumnLayout {
            id: column
            anchors.fill: parent
            spacing: 5
            Layout.alignment: Qt.AlignHCenter

            Repeater {
                id: myList
                model: displayMenu.choixListe

                Button {
                    id: button
                    anchors {
                        left: parent.left
                        leftMargin: 12
                        right: parent.right
                        rightMargin: 12
                    }

                    contentItem: Text {
                        text: modelData
                        font.pixelSize: 20
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        elide: Text.ElideRight
                    }

                    background: Rectangle {
                        color: button.pressed ? "#BBBBBB" : "#D0D0D0"
                        border.color: if (index == displayMenu.indexParDefaut) { "#0A5BC4" } else { "#808080" }
                        border.width: if (index == displayMenu.indexParDefaut) { 3 } else { 1 }
                        radius: 2
                    }

                    onClicked: window.setButtonClicked(index + 1000, "")
                }
            }
        }

        ScrollBar.vertical: ScrollBar { }
    }

    RowLayout {
        id: fButtons
        anchors {
            bottom: parent.bottom
            bottomMargin: 10
            horizontalCenter: parent.horizontalCenter
        }
        spacing: 10

        // Bouton "F1"
        Button {
            id: buttonF1
            ...
        }
    }
}

Thanks.

[Trikrista]

maybe You need to add clip: true in Flickable

[deleted357]

Yes, it's working now.

Flickable {
        ...
        clip: true
        boundsBehavior: Flickable.StopAtBounds
        ...
}

Thanks.