Border (Rectangle) around Column resize



  • I have created a Column with a border (see "this post":http://developer.qt.nokia.com/forums/viewthread/13083/)

    @
    Rectangle
    {
    id: rectangle
    color: "#f3f3f3"
    radius: 5
    border.color: "#5e5b5b"
    border.width: 2
    width: 640;
    // height: column.height

    Column
    {
        id: column
        objectName: "column"
    
        anchors.margins: 1
        anchors.left: parent.left
        anchors.right: parent.right
    
        move: Transition {
                NumberAnimation {
                    properties: "y"
                    duration: 1000
                    onStarted: console.log("move animation started")
                }
            }
    
        onHeightChanged:
        {
            rectangle.height = height
            console.log("height changed")
        }
    }
    

    }
    @

    I have filled the Column in C++ which is working fine.

    Now I'm making a child invisible with

    @
    item->setProperty("visible", false)
    @

    The child gets invisible and the rest of the items are moved up.
    I have the move defined like this:

    @
    move: Transition {
    NumberAnimation {
    properties: "y"
    duration: 1000
    }
    }
    @

    I can see the animation. The Rectangle around the column is not resized. Is it possible to resize it while the move animation is running? So that the rectangle gets smaller as the items are moved up? I thought that the height of the column would change when a child is removed.

    And does anybody maybe know why I cannot see the console.log of the NumberAnimation.onStarted?


  • Moderators

    As far as i can see you didn't set an anchor to the bottom of your -rectangle- id : column.

    I would suggest setting the anchors.bottom of the last item to the bottom of -rectangle- id column.



  • Thank you for your quick answer!

    I have tried setting
    @anchors.bottom: column.children[column.children.length-1].bottom@
    in the Rectangle.

    I've also tried setting this in the onChildrenChanged of the column.

    And I tried setting @anchors.bottom: column.bottom@
    in the Rectangle.

    Sadly, none of them was working.

    I'm not sure if this is what you meant?


  • Moderators

    What i meant was that in the following code the anchors.bottom is not set to the id:rectangle. So how can id: rectangle know it's bottom has to follow id: column?


        Column
        {
            id: column
            objectName: "column"
     
            anchors.margins: 1
            anchors.left: parent.left
            anchors.right: parent.right

    @
    Did you try to set
    Anchors.bottom: parent.bottom here?

    Why not use anchors.fill: parent?



  • When I set anchors.bottom: parent.bottom, I've got a weird behaviour. The Rectangle still stays the same size, the children of the column are aligned to the bottom and they are moved in from beneath the rectangle.

    When I set anchors.fill: parent, the rectangle is not visible anymore. I've got the same problem when I set anchors.top: parent.top


  • Moderators

    Can you provide us a small compilable example so we can test it out?



  • You can download the example "here":http://dl.dropbox.com/u/2346027/groupbox_rectangle.zip
    Thank you for your help!



  • I still haven't found a solution for that problem.
    I just tried setting the height of the rectangle to column.height.
    When I do that, the application crashes. Does anybody know why?

    Which properties change when a child of a Column gets invisible?


Log in to reply
 

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