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

[Girish Ramakrishnan]

I am not entirely sure what you are trying here. But if I understand
correctly, you want something like below. You can scroll the list
horizontally and at the same time you can scroll the image vertically. Is
that what you are looking for? Otherwise, can you modify the qml below?

Girish

import QtQuick 1.1

ListView {
    orientation: ListView.Horizontal
    model: 10
    width: 500
    height: 500

    delegate: Column {
        Text {
            text: "image"
        }
        Flickable {
            id: flickable
            height: 100
            width: 100
            contentWidth: contentItem.childrenRect.width
            contentHeight: contentItem.childrenRect.height
            clip: true
            flickableDirection: Flickable.VerticalFlick

            Image {
                id: image
                source: "image.png"
            }
        }
    }
}


On Tue, Feb 22, 2011 at 3:49 PM, <rachel.liu at orange-ftgroup.com> wrote:

>  Hi Girish,
>
>
>
> I’ve modified the code to include your suggestion but it makes no
> difference in terms of being able to swipe left or right for the next
> article horizontally. I can only just scroll the text vertically which is
> what it is already doing.
>
>
>
> Kind regards,
>
> Rachel
>
>
>
>
>
> *[image: cid:image003.jpg at 01CB9254.25125E20]***
>
> * *
>
> *Rachel Liu*
> *Orange Labs UK*
> Software Developer **
>
> tel. (+44) 0208 987 1987
>
> mob. (+44) 07530 094505
>
> *rachel.liu at orange-ftgroup.com*
>
>
>
> *From:* Girish Ramakrishnan [mailto:girish at forwardbias.in]
> *Sent:* 21 February 2011 19:03
> *To:* LIU Rachel RD-ILAB-LON
> *Cc:* Qt-qml at qt.nokia.com
> *Subject:* Re: [Qt-qml] Using ListView and Flickable element as delegate
>
>
>
> Hi Rachel,
>
> On Mon, Feb 21, 2011 at 10:46 PM, <rachel.liu at orange-ftgroup.com> wrote:
>
> 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
>
>
>
> I think the above is the source of the problem. It should read
> contentItem.childrenRect.width/height since Flickable reparents it's
> children into contentItem.
>
>
>
> Girish
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.qt.nokia.com/pipermail/qt-qml/attachments/20110222/c5defb0a/attachment.html 
-------------- next part --------------
A non-text attachment was scrubbed...
Name: not available
Type: image/jpeg
Size: 805 bytes
Desc: not available
Url : http://lists.qt.nokia.com/pipermail/qt-qml/attachments/20110222/c5defb0a/attachment.jpe