27.Qt Quick QML-State、Transition
1.State
所有组件均具有默认状态,该状态定义对象和属性值的默认配置。可以通过向States属性添加State组件来定义新状态,以允许组件在不同配置之间切换.
许多用户界面设计都是由State状态实现的,比如: 交通信号将根据其State配置来实现红黄绿灯交错亮灭.
在QML中,状态是在State对象中定义的一组属性配置。例如,下面几种用State状态最为方便:
- 只显示某些UI组件,隐藏其他组件
- 向用户展示不同的可用操作
- 启动、停止或暂停动画
- 更改特定Item的属性值
- 显示不同的视图或screen
所有基于Item的对象都有一个states属性和state属性,states属性是一个list<State>类型,用来保存多个不同State对象的列表.
而state属性是一个string类型,用来保存对象当前State对象的名称(表示当前状态是什么样子的),默认是一个空字符串,如果要改变Item对象当前状态,则将state属性设置为要改变的状态name名称即可.
对于非Item对象可以通过StateGroup组件来使用State即可(后面再讲)
1.1 State对象属性
- name : string,状态名称。,每个状态在都应具有唯一的名称
- changes : list<Change>,保存当前State下的多个Change对象,比如PropertyChanges、StateChangeScript、ParentChange等
- extend : string,扩展,表示该状态要在哪个State的基础上进行扩展,当一个状态要在另一个状态基础上进行扩展时,它将继承该另一个状态的所有changes
- when : bool,当什么时候启动状态,默认值为false,比如:when: mouseArea.pressed,表示当有鼠标按下则启动该状态.
1.2 Change对象
当一个对象的状态发生改变,那么该对象展示给用户的效果也会相应发生改变,所以State支持了多个不同Change对象供我们使用,有如下几种:
- PropertyChanges: 改变对象的属性值
- StateChangeScript:运行脚本,比如function函数
- ParentChange: 改变对象的父类对象.并且改变对象在父类对象下的坐标xy,宽高等属性
- AnchorChanges: 改变对象的anchor值
由于帮助手册都有很多示例,所以我们以PropertyChanges为例,来实现一个交通灯
1.3 交通灯示例
我们以交通信号为例,根据其State配置来实现红黄绿灯交错亮灭.效果如下所示:
代码如下所示:
Window {
width: 300;
height: 400;
visible: true;
property var delayCnt: 0 Rectangle {
anchors.fill: parent
gradient: Gradient {
GradientStop { position: 0.0; color: "#14148c" }
GradientStop { position: 0.699; color: "#14aaff" }
GradientStop { position: 0.7; color: "#80c342" }
GradientStop { position: 1.0; color: "#006325" }
}
} Canvas {
id: canvas
anchors.centerIn: parent
width: 80
height: 300
onPaint: {
var ctx = getContext("2d")
ctx.fillStyle = "black"
ctx.fillRect(0,0,width,height-90)
ctx.fillRect(width/2 -15,height-90,30,90)
}
} Column {
id: leds
anchors.centerIn: canvas
anchors.verticalCenterOffset: -45
spacing: 15
state: delayCnt < 5 ? "red" :
delayCnt < 10 ? "green" :
delayCnt < 14 ? (delayCnt%2==0 ? "green" : "") :
"yellow"; Rectangle {
id : redLed
width: 50; height:50
radius: width/2
color: "red"
opacity: 0.2
}
Rectangle {
id : yellowLed
width: 50; height:50
radius: width/2
color: "yellow"
opacity: 0.2
}
Rectangle {
id : greenLed
width: 50; height:50
radius: width/2
color: "green"
opacity: 0.2
} states: [
State {
name: "red"
PropertyChanges { target: redLed; opacity: 1}
},
State {
name: "yellow"
PropertyChanges { target: yellowLed; opacity: 1}
},
State {
name: "green"
PropertyChanges { target: greenLed; opacity: 1}
}
]
}
Timer {
interval: 500
repeat: true
running: true
onTriggered: {
delayCnt = (delayCnt+1)%18
console.log(delayCnt,leds.state)
}
}
}
2.Transition
Transition用来当State发生改变时产生的一个过渡动画(有Transition的地方就会有State出现),使得状态改变更加平滑。
并且所有基于Item的对象都有一个transitions属性,是一个list<Transition>类型,保存着该对象所有的Transtion,只要当该对象的state发生改变时,就会去遍历transitions属性,如果有满足条件的,则产生一个过渡动画.
给transitions赋值和给states赋值一样,假如只有一个Transition,那么我们可以直接这样写:
transitions: Transition {
... ...
}
假如有多个Tansition,可以这样写:
transitions: [
Transition {
... ...
},
Transition {
... ...
}
]
2.1 Transition对象属性
- animations : list<Animation>,default默认属性,此属性保存Transition中的动画列表。
- enabled : bool,Transition使能,默认为true,如果为false则禁止
- from : string,默认值为"*"(任何状态),只要我们未设置from,那么每次转换到另一个状态时,就会将当前状态赋到from中
- to : string,默认值为"*"(任何状态),只要我们未设置to,那么每次转换到另一个状态时,就会将另一个状态赋到to中
- reversible : bool,是否让动画进行反转,默认为false,只有当Transition使用了SequentialAnimation串行动画时,我们需要设置为true
- running : bool,只读属性,保存当前是否在运行中.
2.2 使用串行动画时注意
- 一个Transition可以包含多个动画,并且多个动画默认为并行执行的,所以我们不需要设置reversible为true,因为这些动画没有先后顺序.
- 只有当Transition使用了SequentialAnimation串行动画时,我们才需要设置为true
2.3 在交通灯基础上添加过渡动画
我们在上个示例的leds对象中添加下面代码:
transitions: Transition {
PropertyAnimation { target: redLed; property: "opacity"; duration: 400}
PropertyAnimation { target: yellowLed; property: "opacity"; duration: 400}
PropertyAnimation { target: greenLed; property: "opacity"; duration: 400}
}
- 只要当redLed、yellowLed、greenLed中的opacity属性发生改变时,就会产生一个400ms的过渡动画.
最终效果如下所示:
27.Qt Quick QML-State、Transition的更多相关文章
- Qt Quick鼠标事件处理、键盘、计时器
在<Qt Quick 事件处理之信号与槽>中介绍了 QML 中怎样使用内建类型的信号以及怎样自己定义信号,这次我们来看看怎样处理鼠标.键盘.定时器等事件.这些时间在处理时,一般是通过信号来 ...
- Qt Quick QMl学习笔记 之图片浏览器
Qt Quick模块是编写QML应用程序的标准库.虽然Qt QML模块提供QML引擎和语言基础结构,但Qt Quick模块提供了使用QML创建用户界面所需的所有基本类型.它提供了一个可视画布,包括用于 ...
- Qt Widgets、QML、Qt Quick的区别
Qt Widgets.QML.Qt Quick的区别 简述 看了之前关于 QML 的一些介绍,很多人难免会有一些疑惑: Q1:QML 和 Qt Quick 之间有什么区别? Q2:QtQuick 1. ...
- 从头学Qt Quick(3)-- 用QML写一个简单的颜色选择器
先看一下效果图: 实现功能:点击不同的色块可以改变文字的颜色. 实现步骤: 一.创建一个默认的Qt Quick工程: 二.添加文件Cell.qml 这一步主要是为了实现一个自定义的组件,这个组件就是我 ...
- Qt Quick 与 QML语言(初学笔记1)
Qt Quick Qt Quick是一些新的UI技术的集合,用来帮助开发者创建一种现在越来越多用于手机.多媒体播放器.机顶盒以及其他便携式设备上的直观的.现代的.流畅的用户界面.简单来说,Qt Qui ...
- Qt Quick之StackView具体解释(1)
Qt Quick中有个StackView.我在<Qt Quick核心编程>一书中没有讲到.近期有人问起,趁机学习了一下,把它的基本使用方法记录下来. 我准备分两次来讲.第一次讲主要的使用方 ...
- Qt Quick 基本元素初体验
Qt Quick 作为 QML 语言的标准库,提供了很多基本元素和控件来帮助我们构建 Qt Quick 应用,这节我们简要地介绍一些 Qt Quick 元素. 一. 基本可视化项 1.1 Item I ...
- QML、Qt Quick
当用widget开发Qt时, 语言:C++ 库:Qt库 当用QML开发时, 语言:QML 库:Qt Quick
- qt quick中qml编程语言
Qt QML 入门 — 使用C++定义QML类型 发表于 2013 年 3 月 11 日 注册C++类 注册可实例化的类型 注册不实例化的QML类型 附带属性 注册C++类 注册可实例化的类型 如 ...
随机推荐
- NumPy之:标量scalars
目录 简介 scalar类型的层次结构 内置Scalar类型 boolean Integers Unsigned integers Floating-point numbers Complex flo ...
- go 的方法集和接口断言
Go 的方法集与接口断言 方法集 引子 首先来看一段代码: package main import "fmt" func main() { var v IpmHelloByValu ...
- Co-prime(容斥原理)
Co-prime Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Su ...
- ubuntu 1804 配置阿里源
以防出错,先备份sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak编辑元列表文件sudo vim /etc/apt/sources.list ...
- Python简易远控(单线程版)
1. 技术:管道通信,流文件处理,socket基础 2. Tips: 默认IP:127.0.0.1 默认端口:7676 3. 代码样例: 服务端: #!/usr/bin/env python # en ...
- Linux中数据库的安装和配置(MySQL与Maria DB)
目录 MySQL和Maria DB的介绍 MySQL和Maria DB的安装 yum源安装MySQL(Centos6.5+Mysql5.1) 源码包安装MySQL yum源安装Maria DB 源码包 ...
- 【JavaScript】Leetcode每日一题-二叉搜索树的范围和
[JavaScript]Leetcode每日一题-二叉搜索树的范围和 [题目描述] 给定二叉搜索树的根结点 root,返回值位于范围 [low, high] 之间的所有结点的值的和. 示例1: 输入: ...
- Redis数据结构—链表与字典
目录 Redis数据结构-链表与字典 链表 Redis链表节点的结构 Redis链表的表示 Redis链表用在哪 字典 Redis字典结构总览 Redis字典结构分解 哈希算法 解决键冲突 rehas ...
- layui框架下如何给select的option选项赋值
后端返回数据格式 axios方法执行成功后返回的数据格式如下图 前端下拉框 <div class="layui-form-item"> <label class= ...
- MVC三层架构的功能的简要说明
MVC 介绍 MVC: Model 模型 View 视图 Controller 控制器 M (Model) : 模型 功能 DAO层 : 对数据库进行操作(CRUD) Service层 : 处 ...