Multi touch qml list view and path view



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


  • Moderators

    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 ?



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


  • Moderators

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



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


  • Moderators

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



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


  • Moderators

    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.



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



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


Log in to reply
 

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