Results 1 to 8 of 8

Thread: Flickable some items

  1. #1
    Join Date
    Nov 2014
    Posts
    33
    Thanks
    1
    Qt products
    Qt5
    Platforms
    Windows Android

    Default 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:

    Qt Code:
    1. Item {
    2. anchors.fill: parent
    3. anchors.leftMargin: 5
    4. Flickable {
    5. id:view
    6. anchors.fill: parent
    7. contentHeight: content.height
    8. Item {
    9. id: content
    10. Text {
    11. id: tWhat
    12. text: qsTr("What")
    13. }
    14. Text {
    15. id: tWhere
    16. text: qsTr("Where")
    17. anchors.top: tWhat.bottom
    18. anchors.topMargin: 300
    19. }
    20. }
    21. }
    22. Component.onCompleted: {
    23. console.log(content.height)
    24. }
    25. }
    To copy to clipboard, switch view to plain text mode 

    but content.height returns 0

  2. #2
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: Flickable some items

    Quote Originally Posted by lqsa View Post
    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,
    _

  3. #3
    Join Date
    Nov 2014
    Posts
    33
    Thanks
    1
    Qt products
    Qt5
    Platforms
    Windows Android

    Default Re: Flickable some items

    And, how can I do to work Flickable?

  4. #4
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: Flickable some items

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

  5. #5
    Join Date
    Nov 2014
    Posts
    33
    Thanks
    1
    Qt products
    Qt5
    Platforms
    Windows Android

    Default Re: Flickable some items

    Ok, I understand it. I imagine that I need something like this:
    Qt Code:
    1. 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
    Qt Code:
    1. 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.

  6. #6
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: Flickable some items

    Qt Code:
    1. 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,
    _

  7. #7
    Join Date
    Nov 2014
    Posts
    33
    Thanks
    1
    Qt products
    Qt5
    Platforms
    Windows Android

    Default Re: Flickable some items

    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?
    Last edited by lqsa; 28th August 2015 at 21:10.

  8. #8
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,416
    Thanks
    37
    Thanked 1,544 Times in 1,494 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: Flickable some items

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

Similar Threads

  1. Problem using Flickable in QML?
    By tanthinh1510 in forum Qt Quick
    Replies: 2
    Last Post: 15th May 2015, 08:08
  2. Flickable mouse dragging not working
    By pconfig in forum Qt Quick
    Replies: 0
    Last Post: 14th March 2015, 14:06
  3. mousearea outside flickable not working
    By joko in forum Qt Quick
    Replies: 3
    Last Post: 15th December 2014, 17:36
  4. Flickable and mouse signal propagation
    By clousque in forum Qt Quick
    Replies: 7
    Last Post: 25th August 2014, 13:16
  5. Replies: 0
    Last Post: 16th September 2012, 11:28

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.