状态，定时器和 子线程处理耗时任务。

状态驱动控制界面

显示一些UI组件，并隐藏其他组件；
向用户呈现不同的可用操作；
开始，停止或暂停动画；
执行新状态下需要的一些脚本；
更改特定项目的属性值；
显示不同的试图或屏幕。

Rectangle{
    id: rect1
    width:100; height:100; color:"red"
    states: [
        State{
            name:"Entered" //状态名称
            PropertyChanges {
                target: rect1
                color:"green"
            }
            PropertyChanges{
                rect1{
                    rotation: 45
                }
            }
        },
        State{
            name:"Pressed" //状态名称
            extend: "Entered" //保留状态
            PropertyChanges {
                target: rect1
                scale:"1.5"
            }   
        },
        State{
            name:"Released" //状态名称
            extend: "Pressed" //保留状态
            PropertyChanges {
                rect1{
                    scale: 1.1
                }
            }   
        }
    ]
    
    MouseArea{
        anchors.fill: parent        
        hoverEnabled: true  
        onEntered: rect1.state = "Entered" //状态更改
        onExited:  rect1.state = ""//恢复默认状态
        onPressed: rect1.state = "Pressed"
        onReleased: rect1.state = "Released"
    }
}

Rectangle{
    id: rect1
    width:100; height:100; 
    color:"red"
    state: "state1" //初始状态，不是默认状态。
    states: [
        State{
            name:"state1" //状态名称
            PropertyChanges {
                target: rect1
                color:"green"
            }
        },  
        State{
            name:"state2" //状态名称
            //表达式为true，切换到此状态。
            when: mouseArea.pressed
            PropertyChanges {
                target: rect1
                color:"yellow"
            }
        },
        State{ // 脚本中，可能会修改默认状态，尽量不修改。
            name: "state3"
            StateChangeScript{
                name: "myscript"
                script: {
                    print("StateChangeScript myscript")
                    rect2.color = "grey"
                }
            }
        }
    ]
    MouseArea{
        id: mouseArea
        anchors.fill: parent        
        hoverEnabled: true  
    }
    Button{
        text: "运行 script"
        onClicked: {
            rect2.state = "state3"  
        }
    }
}

定时器Timer 和线程WorkerScript。

Timer:

interval 事件间隔毫秒 1000
repeat 多次执行
running 定时器启动
triggeredOnStart true 定时器启动就立刻执行一次。

信号：triggered(), onTriggered()
方法：restart(),start(), stop().

Timer {
    id: xtimer
    interval: 1000
    triggeredOnStart: true
    repeat: true
    running: true
    ontriggered: {
        //一秒钟执行一次。
        xtime.text = Date().toString()
    }
}

onClicked: {
    xtimer.running = !xtimer.running
}

线程WorkerScript 多线程任务

适合算法加解密，阻塞式业务逻辑的场景。
属性：ready：bool， source:url
信号：message(jsobject msg) onMessage(jsobject msg)
方法：sendMessage(jsobject message)

Rectangle{
    width:200; height:200
    color: "#666"
    Text{
        id:mytext
        text:"点击异步获取数据"
    }
    WorkerScript{
        id:myworker
        source: "myscript.js"   
        //接受数据,刷新UI。
        onMessage:(msg)=> {
            mytext.text = msg.reply;
        }
    }
    MouseArea{
        anchors.fill: parent
        onClicked: {
            //给线程(任务脚本)发送数据
            myworker.sendMessage( {'name':'Tom', 'dates':[1,2,4,5]})
        }
    }
}

//myscript.js

//接受主线程发送的数据sg
WorkerScript.onMessage = function(msg)
{
    print(msg.name)
    print(msg.datas)
    var result = msg.name + ""
    for(var i=0; i<msg.datas.length; i++) {
        result += msg.datas[i] + "|"
    }
    print(result);
    //发送回主线程
    WorkerScript.sendMessage({'reply':result; });
}