状态和过度

Rectangle {
antialiasing: true;
clip: true;
state: 'do'
width: parent.width
height: 400;
id: myparent;
color: "#ffffff"

Column{
width: parent.width;
spacing: 5;
Button{
text:"关闭"
onClicked: {
myparent.state = "do";
}
}

Repeater{
model: 10;
Rectangle{
width: parent.width;
height: 80
color: "#5d91d9"
border.width: 2;
border.color: "blue";
Text{
text:"HELLO";
anchors.centerIn: parent

}
}
}
}

states: [
State {
name: "do"
PropertyChanges {target: myparent; width:0;height:0;opacity:0}
PropertyChanges {target: look; width:look.parent.width;height:80;opacity:1;color:"#c0a933";}

}
]
transitions: Transition {
// Make the state changes smooth
ParallelAnimation {
NumberAnimation { duration: 500; properties: "opacity,x,contentY,height,width" }
ColorAnimation { property: "color"; duration: 500 }

}
}
}

Rectangle{
id:look
//         visible: myparent.state=='do'?true:false
anchors.top: root.top
opacity: 0
width: 0;
height: 0;
color: "#000000"
border.width: 1;
radius: 5
border.color: Qt.lighter(color)
Text {
id: tttt;
text: "查看";
anchors.centerIn: parent;

}
MouseArea{
anchors.fill: parent;
onClicked: {
myparent.state = myparent.state=="do"?"":"do"
look.state = myparent.state;
console.log(myparent.state)
}
}

}