[SailfishDevel] How to properly hide and show UI elements?

[Marcin M.]

I'm want to display some elements only when needed. So I did it like this
(the components are inside a Column):

            TextSwitch
            {
                id: switchTextColor
                text: qsTr("Override text color")
                checked: settings.overrideTextColor
                states: State
                {
                    name: "checked"; when: switchTextColor.checked == true;
                    PropertyChanges { target: textColorButton;  height:
Theme.itemSizeSmall}
                }
                transitions: Transition
                {
                    from: "*"; to: "checked"; reversible: true
                    NumberAnimation { property: "height"; duration: 200;
easing.type: Easing.InOutQuad }
                }
            }

            ColorButton
            {
                id: textColorButton
                height: 0
            }

And the ColorButton component is:
Row
{
    id: root
    property string color: "transparent"
    width: parent.width
    Rectangle
    {
        id: colorIndicator
        color: root.color
        width: Theme.itemSizeSmall
        height: Theme.itemSizeSmall
        border.color: "black"
        border.width: 5
    }

    Button
    {
        id: button
        text: "Choose a color"
        onClicked:
        {
            var dialog = pageStack.push("Sailfish.Silica.ColorPickerDialog")
            dialog.accepted.connect(function() { root.color = dialog.color
})
        }
    }
}

Instead of hiding, the textColorButton is at the top of the Page. If I
check switchTextColor, then it goes where it should be. If then I uncheck
the Switch, the component below goes up, but the textColorButton doesn't
disappear (screenshot)?

What am I doing wrong?

--
Marcin
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.sailfishos.org/pipermail/devel/attachments/20140718/1e3d4342/attachment-0001.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: scr.png
Type: image/png
Size: 310396 bytes
Desc: not available
URL: <https://lists.sailfishos.org/pipermail/devel/attachments/20140718/1e3d4342/attachment-0001.png>