已交互模式进入一个镜像 交互状态

一.状态—State

例子1

实现：通过点击鼠标左键，实现下面转换

点击左键

点击左键

实现步奏：1）实现图示图片

2）将图片一定义为状态stop,图片2定义为go

3）设定默认状态

4）响应鼠标点击事件并状态切换

判断语句：鼠标左键点击事件产生-》 i）如果当前状态为stop状态，则转向go状态。否则转向stop状态

分步代码实现：

1） 定义一个大矩形框内有两个垂直排放的小矩形框，颜色暂时未设定！

Rectangle{
            width:500;height:500
            Rectangle{
                id:stop_light
                width:120;height:120;x:25;y:15
            }
            Rectangle{
                id:go_light
                width: 120;height:120;x:25;y:125
            }

2）定义状态
PropertyChanges 用来在State中定义属性的值或者绑定，这使得一个Item的属性可以随着states的改变而发生变化

states: [
                State {
                    name: "stop"//状态名称
                    PropertyChanges {
                    /*属性改变的目标，color属性*/           
                        target: stop_light;color:"red"
                    }
                    PropertyChanges{
                        target: go_light;color:"black"
                    }
                },//两个state之间用,
                State{
                    name:"go"
                    PropertyChanges{
                        target: stop_light;color:"black"
                    }
                    PropertyChanges{
                        target: go_light;color:"green"
                    }
                }
            ]

3）设定默认状态

state:"stop"

4)响应鼠标点击和判断状态转换

MouseArea{
                anchors.fill: parent
                onClicked: parent.state=="stop"? parent.state="go": parent.state="stop"
            }

总代码：
新建项目中的Qt Quick Application

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2

ApplicationWindow {
    title: qsTr("状态变换")
    id:window
    width: 640
    height: 480
    visible: true
   Rectangle{
            width:500;height:500
            Rectangle{
                id:stop_light
                width:120;height:120;x:25;y:15
            }
            Rectangle{
                id:go_light
                width: 120;height:120;x:25;y:125
            }
            states: [
                State {
                    name: "stop"
                    PropertyChanges {
                        target: stop_light;color:"red"
                    }
                    PropertyChanges{
                        target: go_light;color:"black"
                    }
                },
                State{
                    name:"go"
                    PropertyChanges{
                        target: stop_light;color:"black"
                    }
                    PropertyChanges{
                        target: go_light;color:"green"
                    }
                }
            ]
            state:"stop"
            MouseArea{
                anchors.fill: parent
                onClicked: parent.state=="stop"? parent.state="go": parent.state="stop"
            }
   }
}

例子2

基本布局：一个TextInput和一个clear.png图片

功能：点击清理可以将文字删除，并且清理图片变暗（即不可用），输入文字后，清理变亮（可用）

即：

点击清理

输入文字

实现步奏：

1）建立基本布局。导入图片

2）清理图片功能实现

3）有文字时清理图片亮，无时变暗即状态的改变来使透明度发生变化

参考

代码实现

1）基本布局

使用Image导入图片时候，除了将图片放在本项目的目录下，还需要将图片导入项目中

法1

在当前行右键 -》添加新文件-》将图片添加进来

法2

打开qml.qrc文件

即如选中行一样，将文件 路径添加进去

布局代码

TextInput{
                id:text_field
                width:300
                y:10

                text:"enter text.."
                font.pixelSize: 50
            }
            Image{
                id:clear_button
               /*设定图片的大小与位置*/
                width:20;height:text_field.height
                y:10; x:300
                source:"./clear.png"
                }

2）点击图片进行清理功能实现：即在图片范围内，接收到鼠标点击事件，然后将TextInput中text内容删除
代码

MouseArea{
            anchors.fill:parent
            onClicked: text_field.text=""
        }

3）有文字时图片亮，没时变暗实现：即亮-》暗状态进行变化。即使用when来判断text的内容来进行状态转换
代码

states: [
                State {
                    name: "with text"
                    when:text_field.text!=""
                    PropertyChanges {
                        target: clear_button;opacity:1.0

                    }

                },
                State {
                    name: "without text"
                    when:text_field.text==""
                    PropertyChanges {
                        target: clear_button;opacity:0.25

                        }
                    PropertyChanges{
                        target: text_field;focus:true
                    }
                }
            ]

完整代码

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2

ApplicationWindow {
    title: qsTr("第二种state转换")
    id:window
    width: 640
    height: 480
    visible: true
   Rectangle{
            width:500;height:500;color:"grey"
            TextInput{
                id:text_field
                width:300
                y:10

                text:"enter text.."
                font.pixelSize: 50
            }
            Image{
                id:clear_button
               /*设定图片的大小与位置*/
                width:20;height:text_field.height
                y:10; x:300
                source:"./clear.png"

            MouseArea{
                anchors.fill:parent
                onClicked: text_field.text=""
            }
           }
            states: [
                State {
                    name: "with text"
                    when:text_field.text!=""
                    PropertyChanges {
                        target: clear_button;opacity:1.0

                    }

                },
                State {
                    name: "without text"
                    when:text_field.text==""
                    PropertyChanges {
                        target: clear_button;opacity:0.25

                        }
                    PropertyChanges{
                        target: text_field;focus:true
                    }
                }
            ]
   }
}