状态和过度

假如有一些属性,我要改掉它,以后要还原回去,最方便的就是状态机,不需要保存原始的状态,把状态清空就恢复到原始了
一个例子，点击查看设置myparent的状态为do,do的属性是 width:0;height:0;opacity:0
设置状态或还原状态后会触发过度效果Transition color变色延时500 和opacity,x,contentY,height,width延时500
需要注意的是state的可见域,多测试几次就会了

     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)
             }
         }

     }