Correct way to create column with dynamic content



  • 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!


Log in to reply
 

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