Multi touch qml list view and path view

martinsmith160

Hi All,

I have wrote a simple horizontal qml list view and I have created two instances of the component side by side. I want to be able to interact with each listview at the same time. it seems list views don't allow for multi touch. As soon as I touch one list, it steals the focus from anything else. This is also true for pathviews.

Does anyone know if there is anyway to enable multi touch for qml view objects or will I have to write my own if I want multitouch functionalitys.

p3c0

Hi,

bq. I want to be able to interact with each listview at the same time

Do you mean if you scroll one ListView the other should also scroll simultaneously according to other ?

martinsmith160

Yes, sorry I should have been clearer. Thats exactly what I want to be able to do.

p3c0

You can assign contentX of one ListView to other ListView in onContentXChanged handler.

martinsmith160

The lists contents are different so I dont want to reflect the actions of one list onto the other. I append different data into the lists on start up. The idea is a user on the left can look through a list at the same time as a user on the right.

p3c0

Sorry but i'm confused now. Can you post an example showing what you are trying to achieve ?

martinsmith160

Sorry for the confusion, here is my qml code for my list view component.

@import QtQuick 2.0

Rectangle
{
width: 410
height: 355
color: "#00000000"
property int current: 0
property string selectedLetter: ""
property string list_state: ""

signal selected_index (int index)

signal send_message_signal(QtObject instance, string msg);

property bool enable_highlight: false

property int element_width: 320

Component
{
    id: highlight
    Rectangle
    {
        width: element_width; height: 65
        color: "#c60b51";
        opacity: 0.4
        y: songsListView.currentItem.y
        visible: enable_highlight

        Behavior on y
        {
            SpringAnimation
            {
                spring: 3
                damping: 0.2
            }
        }
    }
}

ListModel
{
id:songsModel
}

ListView
{
    id: songsListView
    x:abc_letters.width+2
    y: 25
    width: parent.width
    height: 330
    highlight: highlight
    highlightFollowsCurrentItem: false
    clip:true
    model: songsModel


    delegate:
        Rectangle
        {
            id: main_rect
            x:0
            width: element_width
            height: 65
            color:"Transparent"
            Column
            {
                Rectangle
                {
                    height: 38; width:element_width;
                    color:"Transparent"
                    Rectangle
                    {
                        height: 1
                        width: element_width
                        color:"White"
                    }

                    Text
                    {
                        text:Title
                        width: element_width
                        height: 65
                        font.family: "Trebuchet MS"
                        //horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        font.pixelSize:20
                        color: "White"

                    }

                }
            }
            MouseArea
            {
                anchors.fill: parent

                onClicked:
                {
                    songsListView.currentIndex = index
                    selected_index(index);
                }
            }
        }
}


function appendElement (title)
{
    songsModel.append({"Title":title})
}

function clear_list()
{
    songsModel.clear();
}

function get_specific_index_title(index)
{
    return songsModel.get(index).Title;
}

function getSortedItems(searchLetter)
{
    for (var songsTitle = 0; songsTitle < songsModel.count; songsTitle++)
    {

        if(searchLetter === songsModel.get(songsTitle).Title.substr(0,1))
        {
            songsListView.currentIndex = songsTitle;

            songsTitle = songsModel.count; //first item found so break
        }
    }

}

}
@

I should have said at the beginning that im targeting touch screen devices. Ill tell you a little more about what I want the app to do. Its basically a splitscreen media browser. So there is a left side and a right side. Everything that is on the left is on the right but they are instanced. They are NOT copies of the same thing. So each sides data is independent of each other.

I create and populate each list at start up and they are positioned side by side.. So currently a user can touch a list and swipe up and down to browse through the list. But I want my app to allow 2 users to interact with each sides list at the same time. If a user is dragging the list on the left, then the all other input to other lists is blocked.

p3c0

Ok, the requirements seems to be clear now. Since you want to allow multiple touches, you will have to use "MultiPointTouchArea":http://qt-project.org/doc/qt-5/qml-qtquick-multipointtoucharea.html. Check it's example. Then after defining TouchPoint's (say 2 for your 2 lists) you can bind the y values of these points to the ListView's contentItem.y so that when you drag, the ListView drags too. But take a note that you might need to do some calculations prior to assigning these raw y values to ListView.

martinsmith160

Ok thats a great help. I have used MultiTouch areas for some of my other components so I will take a look at using them with list views. Thanks a lot. Ill let you know how I get on.

martinsmith160

Ok thats working well. To get it working I had to make my list views non-interactive so I have lost all the nice swipe animations. I guess I would have to define all the interactions myself.

I can now move each list up and down at the same time. Thanks. It has however created a different problem. I have created my MultiPointTouchArea within the list view. This area is now blocking the mouse area defined within the delegate. So I cant select any of the items in the list anymore. Is there any way to pass mouse input through the multipoint area to the inner mouse areas.