Flickable in Drawer

Amir Afendin

Is it possible to use Fliackable in Drawer ? I tried different ways but it didn't work.
For instance:

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Controls.Material 2.0

Drawer {
id: drawer
width: Math.min(window.width, window.height) / 3 * 2
height:  window.height

Flickable {
    contentHeight: drawer.height
    Column {
        Repeater {
            model: 150
            Text {
                text: "OMG"
            }
        }
    }
}
}

Julien B

Hello @Amir-Afendin,

It is possible to use a Flickable in Drawer.


Drawer {
    id: drawer
    width: Math.min(window.width, window.height) / 3 * 2
    height:  window.height

    ListView {
        id: listview
        width: parent.width; height: parent.height
        // When scroll end align to the nearest item
        snapMode: ListView.SnapToItem
        // Clip painting to his own bounding rectangle to avoid display
        // data outside specified size during flick
        clip: true

        model: listModel

        // Display Scroll bar only when moving
        onMovementStarted: verticalScrollBar.opacity = 1
        onMovementEnded: verticalScrollBar.opacity = 0

        // Auto fade Scrollbar
        ScrollBar.vertical: ScrollBar {
            id: verticalScrollBar
            active: true
            orientation: Qt.Vertical

            opacity: 0
            Behavior on opacity {NumberAnimation { duration: 500 }}

            contentItem: Rectangle {
                implicitWidth: 4
                radius:2
                implicitHeight: 100
                color: "grey"
            }
        }

        delegate: Component {
            id: myDelegate
            Text {
                text: name
                color: "white"
            }

        }

        ListModel {
            id: listModel
            ListElement { name: "One"}
            ListElement { name: "Two"}
            ListElement { name: "Three"}
            ListElement { name: "Four"}
        }
    }
}

Nevertheless i am not sure you can use a Repeater to create your model.

Have you tried to create it from C++?

Amir Afendin

@Julien-B Thanks for the efforts, but I need exactly Flickable not ListView. I need scrolling page because I'm going to put different items there and it's gonna be tough with ListView because of Loader and different stuff, for now i'm just seeking for simple solution. For example do you have aliexpress application? I need Drawer like that.

Julien B

Is something like that close to what you are looking for?

Flickable {

    anchors.fill: parent
    contentHeight: contentItem.childrenRect.height

    Column {
        Repeater {
            model: 150
            Text {
                text: "OMG"
                color: "white"
            }
        }
    }
}

Amir Afendin

@Julien-B yeah, thank you so much, already got from stackoverflow something like that