import QtQuick 2.10
import QtQuick.Layouts 1.3
import QtQuick.Window 2.3
import QtQuick.Controls 2.3

Window {
    visible: true
    width: 210
    height: 480
    title: qsTr("Hello World")

    StackView {
        anchors.fill: parent
        initialItem: initial

        Component {
            id: initial

            StackLayout {

                ColumnLayout {
                    Rectangle {
                        Layout.preferredHeight: 40
                        Layout.fillWidth: true
                        color: "red"
                    }

                    Text {
                        id: text
                        visible: false
                        Layout.leftMargin: 20
                        Layout.rightMargin: 20
                        Layout.fillWidth: true
                        wrapMode: Text.Wrap
                        text: "Subtitle. Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                        onVisibleChanged: {
                            if (visible)
                                console.log("onVisibleChanged: ", implicitHeight)
                        }
                        onImplicitHeightChanged: console.log("onImplicitHeightChanged: ", implicitHeight)
                    }

                    MouseArea {
                        Layout.preferredHeight: 40
                        Layout.fillWidth: true

                        Rectangle {
                            anchors.fill: parent
                            color: "red"
                        }

                        onClicked: text.visible = !text.visible
                    }
                }
            }
        }
    }
}