[Qt-qml] Using ListView and Flickable element as delegate

[rachel.liu at orange-ftgroup.com]

Hi,

 

I am struggling to do the following and hope there is something who
might have come across a similar scenario in what I am trying to
achieve. As a result, my main question is if there's a way to support
horizontal swiping as well as vertical scrolling of the article?

 

My current implementation involves the following format and works fine.
The purpose of this is being able to swipe through different articles in
the model given. 

 

ListView {

                orientation: ListView.Horizontal;

                Delegate: ArticleViewDelegate {

}

}

 

The ArticleViewDelegate has the following format which is quite simple: 

Rectangle {

Image {}

Text {}

Image {}

Text {}

}

                

Currently, the text for the article is too long, therefore I wanted to
use the Flickable element and just alter the ArticleViewDelegate but
this doesn't seem to work very easily. I've been experimenting with just
the article text as an example delegate as follows:

 

        delegate: Rectangle {

            anchors.fill: parent;

            Flickable {

                id: flickableView;

                anchors.fill: parent;

                contentWidth: childrenRect.width; contentHeight:
childrenRect.height

                onMovementEnded:
articlesListView.positionViewAtIndex(index,ListView.Beginning)

                //boundsBehavior: Flickable.StopAtBounds

                flickableDirection: Flickable.VerticalFlick

                Rectangle {

                    id: frame;

                    width: articlesListView.width;

                    anchors.left: parent.left;

                    anchors.leftMargin: 10;

                    Text {

                        id: articleText;

                        anchors.fill: parent;

                        anchors.margins: 20;

                        wrapMode: Text.WordWrap;

                        font.family: "Calibri";

                        font.pixelSize: 22;

                        color: articleColor;

                        text: model.text;

                    }

               }

            }

 

However, this means that although I have the text formatted in the way I
wanted to and the flickable works, it does not allow me to do the swipe
action anymore. I've been using different properties like boundsBehavior
(if I use this, this doesn't allow any user interaction at all) and if I
use flickableDirection and set it as verticalFlick then the behavior is
what I want to achieve but with no swipe and without it, the text just
flicks everywhere. Is this resolvable? It seems like the mouse events
gets overridden as the logic seems to be there. Any advice and tips are
much appreciated.

 

Kind regards,

Rachel

 

 

 

Rachel Liu
Orange Labs UK
Software Developer 

tel. (+44) 0208 987 1987

mob. (+44) 07530 094505
rachel.liu at orange-ftgroup.com

 

-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.qt.nokia.com/pipermail/qt-qml/attachments/20110221/2a49e85c/attachment-0001.html 
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/jpeg
Size: 805 bytes
Desc: image001.jpg
Url : http://lists.qt.nokia.com/pipermail/qt-qml/attachments/20110221/2a49e85c/attachment-0001.jpe