[Solved] Expand item to take maximum available place in a Row



  • Hi,

    I did try a search on the forums, but could not find any answer - maybe just because I did not use the right terms, so if this question is already answered please just point me to the right thread :)

    What I want is to have an item inside a Row to take up as much place as possible, so I do not have to worry about taking it correct size if the window is resized. I tried some settings with anchors but these did turn up with no results so far.

    May layout is like this:

    @
    Column{
    anchors.fill: parent
    Caption{
    id: title
    text: "Connection suceeded."
    color: '#99CC32'
    textcolor: "#ffffff"
    }

        Row{
            spacing: 10
            anchors.left: parent.left
            anchors.right: parent.right
    
            Rectangle{
                color: 'red'
            }
    
            Rectangle{
                color: 'green'
            }
        }
    }
    

    @

    As you see I want the green and red Rectangle inside the Row to use up the whole available space. I'd be very grateful for any hints on this.

    Thanks in advance!

    FYI: Caption is a custom type.



  • I think you are looking for:
    @anchors.fill: parent@



  • Thanks for your reply. I tried that already but it ended up in showing no Rectangles at all. I seems like the Rectangles are only displayed if I assign them a width and height. Currently I'm using a workaround by setting those settings to some value derived from the window size - but that's pretty much not what I want to do.



  • You tried to edit the qml with qrcreator editor?



  • I usually use QtCreator for editing - but I don't get how the choice of editor should alter the effects of my QML?



  • Everything looks ok, but there is something important that you have to watch. Which parent has width and height set? if no parent has no size it is not correct.

    Best,
    Fernando.



  • I thought so already. So there seems no posibillity to let the elements arrange them selfs. Good to know :)

    Thanks for all your replies. The UI is now displayed as I wanted it to - I only needed to define a width in one of the row elements and the others - I am actually using more than two - is assigned dynamically by the anchor definitions.



  • I have created a component to layout items in a row taking full available space, considering the margins of the row and the set spacing. It was really easy, here it is:

    HorizontalLayout.qml
    @// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
    import QtQuick 1.1

    Row {
    id: root

    function __update() {
        for (var i = 0; i < children.length; i++) {
            var child = children[i];
            child.height = root.height
            child.width = ( root.width - ( (children.length - 1) * spacing ) ) / children.length
        }
    }
    
    onChildrenChanged: __update()
    onVisibleChanged: __update()
    onWidthChanged: __update()
    

    }@

    With this implementation items must have same widths.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.