Flickable some items

[lqsa]

Hello,

On Android applications, when the page is larger than the screen, it can scroll down to show it. How can achive that with QML?

I've tried the Flickable item:

Item {
    anchors.fill: parent
    anchors.leftMargin: 5
    Flickable {
        id:view
        anchors.fill: parent
        contentHeight: content.height
        Item {
            id: content
            Text {
                id: tWhat
                text: qsTr("What")
            }
            Text {
                id: tWhere
                text: qsTr("Where")
                anchors.top: tWhat.bottom
                anchors.topMargin: 300
            }
        }
    }
    Component.onCompleted: {
        console.log(content.height)
    }
}

Item {
    anchors.fill: parent
    anchors.leftMargin: 5
    Flickable {
        id:view
        anchors.fill: parent
        contentHeight: content.height
        Item {
            id: content
            Text {
                id: tWhat
                text: qsTr("What")
            }
            Text {
                id: tWhere
                text: qsTr("Where")
                anchors.top: tWhat.bottom
                anchors.topMargin: 300
            }
        }
    }
    Component.onCompleted: {
        console.log(content.height)
    }
}

To copy to clipboard, switch view to plain text mode 

but content.height returns 0

[anda_skoa]

but content.height returns 0

As it should.
Item "content" has not been given any height, so its height property is at the default value, which is 0.
Anything else would be highly surprising and a bug.

Cheers,
_

[lqsa]

And, how can I do to work Flickable?

[anda_skoa]

I am afraid I don't understand.
You have a content height of 0, there is nothing to scroll.

If you want Flickable to scroll something, you need to have something that is larger than then Flickable itself.

Cheers,
_

[lqsa]

Ok, I understand it. I imagine that I need something like this:

contentHeight: tWhat.height + tWhere.height

contentHeight: tWhat.height + tWhere.height

To copy to clipboard, switch view to plain text mode 

But, this is only a sample, I would like to scroll the child items that appear inside the content item. Imagine that I have a lot of items, N, then I must to change the code to

contentHeight: item1.height + ... + itemN.height

contentHeight: item1.height + ... + itemN.height

To copy to clipboard, switch view to plain text mode 

But, how can I generalize that? I would like to do something general, a component that calculates automatically the height that all its children take. The content item is only created to group all the items that I need to scroll.

[anda_skoa]

height: childrenRect.height

height: childrenRect.height

To copy to clipboard, switch view to plain text mode 

Or use a positioner, which will grow with its content, e.g. Row

Cheers,
_

[lqsa]

I've put it on the content Item and works. Thank you very much!!

One question about Row. My problem with Row is that I can't give different spacing between items, is it correct?

Imagine that I've a Text (1), a TextInput (2), a Text (3) and a TextInput (4). I would like 5 pixels spacing from (1) to (2) and from (3) to (4), but from (2) to (3) 30 pixels:

(1)
... 5 pixels
(2)
... 30 pixels
(3)
... 5 pixels
(4)

Is it possible to achive that with a Row?

[anda_skoa]

Ah, yes, in this case anchoring might be more straight forward.

With a row you would need to add "spacer" items, e.g. Item with a height that has the desired spacing value.

Cheers,
_