ListView in Slidemenu

[Tobias1983]

Hi everybody,

i have a problem with the use of a scrollable listview in a slidemenu.
But first I try to explain my current Status.

I have a mainscreen window and with a swipe gesture left a ListView opens.
For the left swipe gesture i use the "SwipeArea" item from Sergejs Kovrovs. (see below)
Depending on where i place the objects (ListView, SwipeArea) either scroll through the ListView or close the ListView. But not both together.
I would like that the swipe to left the ListView close again and swipe up/down to scroll the ListView.

Can somebody help me please?
Thanks for all
Greetings,
Tobias

PS: Currently i´m using Qt5.5

Now my files:

1. SwipeArea.qml

/* This code was written by Sergejs Kovrovs and has been placed in the public domain. */
import QtQuick 2.0


MouseArea {
	property point origin
	property bool ready: false
	signal move(int x, int y)
	signal swipe(string direction)

	propagateComposedEvents: true

	onPressed:
	{
		drag.axis = Drag.XAndYAxis
		origin = Qt.point(mouse.x, mouse.y)
	}

	onPositionChanged:
	{
		switch (drag.axis)
		{
		case Drag.XAndYAxis:
			if (Math.abs(mouse.x - origin.x) > 16)
			{
				drag.axis = Drag.XAxis
			}
			else if (Math.abs(mouse.y - origin.y) > 16)
			{
				drag.axis = Drag.YAxis
			}
			break
		case Drag.XAxis:
			move(mouse.x - origin.x, 0)
			break
		case Drag.YAxis:
			move(0, mouse.y - origin.y)
			break
		}
	}

	onReleased:
	{
		switch (drag.axis)
		{
		case Drag.XAndYAxis:
			canceled(mouse)
			break
		case Drag.XAxis:
			swipe(mouse.x - origin.x < 0 ? "left" : "right")
			break
		case Drag.YAxis:
			swipe(mouse.y - origin.y < 0 ? "up" : "down")
			break
		}
	}
}

2. main.qml

import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Layouts 1.1

Window
{
	id: id_root
	visible: true
	width: 1024
	height: 768

	// visibility: "FullScreen"

	property bool left_menu_shown: false

	Rectangle
	{
		id: id_left_menu
		height: parent.height
		width: parent.width * 0.5
		x: parent.width * -0.5
		visible: false

		color: "#303030";
		Behavior on x { NumberAnimation { duration: 400; easing.type: Easing.OutQuad } }

		ListView
		{
			id: id_left_listview
			anchors { fill: parent; margins: 22 }
			model: 20

			delegate: Item
			{
				height: 80;
				width: parent.width;
				Text
				{
					anchors
					{
						left: parent.left;
						leftMargin: 12;
						verticalCenter: parent.verticalCenter
					}
					color: "white";
					font.pixelSize: 32;
					text: "This is menu #" + index
				}
				Rectangle
				{
					height: 2;
					width: parent.width * 0.7;
					color: "gray";
					anchors { horizontalCenter: parent.horizontalCenter; bottom: parent.bottom }
				}
			}
		}
	}
	SwipeArea
	{
		id: id_left_swipe
		height: parent.height
		width: (id_root.left_menu_shown == true) ? parent.width * 0.5 :  parent.width * 0.25
		anchors.left: parent.left

		onSwipe:
		{
			switch (direction)
			{
			case "left":
				console.log( "swipe left" );
				if ( id_root.left_menu_shown === true )
				{
					id_left_menu.x = id_root.width * -0.5
					id_root.left_menu_shown = false;
					console.log( "close" );
				}
				break
			case "right":
				console.log( "swipe right" );
				if ( id_root.left_menu_shown === false )
				{
					id_left_menu.x = 0
					id_left_menu.visible = true ;
					id_root.left_menu_shown = true;
					console.log( "open" );
				}
				break
			case "up":
			case "down":
				break;
			}
			Drag.drop()
		}
		onCanceled:
		{
			console.log( "canceled" );
			Drag.drop()
		}
	}
}

[p3c0]

Hi @Tobias1983
The problem is that the SwipeArea is blocking the events to other areas since it is on top. Looking at the source of SwipeArea it seems it propagates the events to items under it but for it to work other items should be under it. So a solution to your problem is to make Rectangle with id id_left_menu as a child of SwipeArea named id_left_swipe. So

SwipeArea
{
    id: id_left_swipe
    height: parent.height
    ...
    ...
    Rectangle
    {
        id: id_left_menu
        height: parent.height
        width: parent.width * 0.5
        ...
        ...
    }
}

[Tobias1983]

Hi p3c0,

thanks for your reply, i tried your solution but the problem still exists.
When the listview is shown, the list is scrollable. But the horizontal swipe dosen´t work.
Will the the property "propagateComposedEvents" dosen´t work with draggin?

Greetings Tobias

[Tobias1983]

Hi p3c0,

now i found a solution for my problem, maybe yo mean that and i don´t unterstand it :)
i only put the SwipeArea into the ListView like the following example.

ListView
{
	id: id_left_listview
	anchors.fill: parent
            ....
	SwipeArea
	{
		anchors.fill: parent
		// propagateComposedEvents: true
                    ....
            }
}

Thanks a lot for your help.

Greetings Tobias