ListView in Slidemenu



  • 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()
    		}
    	}
    }
    

  • Moderators

    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
            ...
            ...
        }
    }
    


  • 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



  • 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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.