[SOLVED] QML Column - how to prevent default functionality

supaukko

Hi!

Is there a way to overwrite the default functionality when Column's child goes fully transparent (no transitions)?

Here is an example code that describes the problem, hopefully (see removeBtn's onClicked slot):
@
import QtQuick 1.1
Rectangle {
width: 360
height: 360
id: window

Column {
     id: column

     property int itemCount: window.inPortrait ? 2 : 4
     property int rectangleHeight: Math.round(column.height / itemCount)

     anchors.fill: parent
     anchors.margins:  1
     Rectangle {
         id: red
         width: column.width; height: column.rectangleHeight
         color: "red"
         border.color: "white"
         radius: 15
     }
     Rectangle {
         id: green
         width: column.width; height: column.rectangleHeight
         color: "green"
         border.color: "white"
         radius: 15
     }
     Rectangle {
         id: blue
         width: column.width; height: column.rectangleHeight
         color: "blue"
         border.color: "white"
         radius: 15
     }
 }

 Row {

     spacing: 10
     anchors.bottom: parent.bottom
     Rectangle {
         width: txtAdd.width + 10
         height: txtAdd.height + 10
         Text {
             id: txtAdd
             text: qsTr("Add")
             anchors.centerIn: parent
         }
         MouseArea {
             anchors.fill: parent
             onClicked: {
                 green.opacity = 1;
             }
         }
     }
     Rectangle {
         id: removeBtn
         anchors.bottom: parent.bottom
         width: txtRem.width + 10
         height: txtRem.height + 10
         Text {
             id: txtRem
             text: qsTr("Remove")
             anchors.centerIn: parent
         }
         MouseArea {
             anchors.fill: parent
             onClicked: {
                 // Should be like this green.opacity = 0
                 green.opacity = 0.000001;
             }
         }
     }
 }

}
@

I found the solution..just by "wrapping" a rectangle under a parent item would do the trick:
@
Item {
width: red.width; height: red.height;

Rectangle {
         id: red
}

}