用户交互（2-状态）

来源：互联网发布：阿里云切换系统编辑：程序博客网时间：2024/05/02 06:11

一.状态—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.4import QtQuick.Controls 1.3import QtQuick.Window 2.2import QtQuick.Dialogs 1.2ApplicationWindow {    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.4import QtQuick.Controls 1.3import QtQuick.Window 2.2import QtQuick.Dialogs 1.2ApplicationWindow {    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                    }                }            ]   }}

0 0