Correct way to create column with dynamic content

[Janna]

I am trying to create a component which can have different content items (texts or rectangles) depending on the state. Here is the example code:

import QtQuick 2.3
import QtQuick.Controls 1.2

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Rectangle {
        id: rect
        state: "start"

        MouseArea {
            anchors.fill: parent
            onClicked: rect.state == "start" ? rect.state = "stop" : rect.state = "start"
        }

        states: [
        State {
                name: "start";

                PropertyChanges {
                    target: text0
                    text: "test"
                }

                PropertyChanges {
                    target: rect
                    height: col.childrenRect.height + 20  // not working.. however text0.height + text1.height+ 20 works..
                }

            },//

            State {
                name: "stop"

                PropertyChanges {
                    target: text0
                    text: "This is line 1 this is line 1 this is line 1 line 1 line 1 This is line 1 this is line 1 this is line 1 line 1 line 1 This is line 1 this is line 1 this is line 1 line 1 line 1"
                }

                PropertyChanges {
                    target: rect
                    height: col.childrenRect.height + 20 // not working 
                }

            }
        ]

        color: "orange"
        x: 10
        y: 10

        width: 150
        height: col.childrenRect.height + 20

        Column {
            id: col
            anchors.fill: parent
            anchors.margins: 10
            spacing: 5

            Text {
                id: text0

                width: parent.width
                wrapMode: Text.WordWrap
                text: "This is line 1 this is line 1 this is line 1 line 1 line 1 This is line 1 this is line 1 this is line 1 line 1 line 1 This is line 1 this is line 1 this is line 1 line 1 line 1"
            }


            Text {
                id: text1

                width: parent.width
                wrapMode: Text.WordWrap
                text: "This is line 2 this is line 2 this is line 2 line 2 line 2"
            }
        }
    }
}

I would like to adjust the height of the rectangle based on the height of the column (children inside the column). I would like to set items inside of column visible true/false in order to dynamically modify the view inside the rectangle. Could you check my code and see if this is a good way to do that? I also would like to animate the "height" property of the rectangle based on the height of the column. However I have not found a good way to do it.
Thanks!