Flickable some items

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:

Code:

---

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)
    }
}

---

but content.height returns 0

Quote:

---

Originally Posted by lqsa

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,
_

And, how can I do to work Flickable?

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,
_

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

Code:

---

contentHeight: tWhat.height + tWhere.height

---

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

Code:

---

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

---

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.

Code:

---

height: childrenRect.height

---

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

Cheers,
_

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?

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,
_