《states和transitions介绍》
所有的热爱都要不遗余力,真正喜欢它便给它更高的优先级,和更多的时间吧!
QML其它文章请点击这里: QT QUICK QML 学习笔记
1. 运行结果
老规矩,先看运行效果,共有三种状态“左边”、“中间”和“右边”,左边到中间200ms,中间到右边500ms,右边到左边1000ms。
2. 代码
import QtQuick 2.7
import QtQuick.Controls 2.0
ApplicationWindow{
visible: true
width: 300
height: 200
title: qsTr("三开开关");
//整个横条
Rectangle {
id: rct
anchors.centerIn: parent
height: 30
width: 120
color: "gray" //底层灰色
radius: height/2;
property var _strs: ["左边", "中间", "右边"];
//横条里的小滑块
Rectangle {
id: slider
width: parent.width * 0.33
radius: parent.radius
color: (slider.state == "") ? "red" : ((slider.state == "middle")? "green": "blue")
anchors {
top: parent.top
bottom: parent.bottom
}
///● state和states
state: "right" //初始状态在右边
states: [ //状态列表 有三种状态可选
//空字节,"left"
//也可以只给一个名字如下:
//State { name: "left" },
State {
name: "middle"
PropertyChanges {
target: slider
x: slider.width// 1/3
}
},
State {
name: "right"
PropertyChanges {
target: slider
x: slider.width*2// 2/3
}
}
]
///● transitions 转换
transitions: [
//"" 状态 ——> "middle" 状态 200ms
Transition {
from: ""; to: "middle";
NumberAnimation{ properties: "x" ; duration:200 }
},
//"middle" 状态 ——> "right" 状态 500ms
Transition {
from: "middle";to: "right";
NumberAnimation{properties: "x"; duration:500}
},
//"其它" 状态 ——> "其它" 状态 1000ms
Transition {
from: "*"; to: "*";
NumberAnimation{properties: "x"; duration:1000}
}
]
Text {
anchors.centerIn: parent
text: slider.state == "" ? rct._strs[0] : (slider.state == "middle"? rct._strs[1] : rct._strs[2]);
color: "white"
font.pointSize: 10
}
}
}
MouseArea {
anchors.fill: rct;
onPressed: {
if(slider.state == ""){
slider.state = "middle";
}
else if(slider.state == "middle"){
slider.state = "right";
}
else{
slider.state = "";
}
}
}
}
3. 关键词详解
● state和states
state和states一般搭配使用,别说qml的状态了,我们人也都是有状态的,今天状态好的话,工作效率高,吃啥啥香,看啥啥顺眼;状态差的话,犯困,被项目经理叼。这 “好” 状态和 “坏” 状态就分别对应了state的两种选择。 “工作效率高,吃啥啥香,看啥啥顺眼” 就是states的一组状态哈。
state可用来指定states的状态之一, 没有指定则为默认状态,为空字符串,同样,通过将此属性设置为空字符串,可以将项返回到其默认状态。上面实例有说明。states 就是多组状态信息,而在转换过程中可以指定transitions(转变)信息。
● transitions:
一系列的过渡能够被加入任何元素,一个过渡由状态的改变触发执行。你可以使用属性的from:和to:来定义状态改变的指定过渡。
这两个属性就像一个过滤器,当过滤器为true时,过渡生效。你也可以使用“”来表示任何状态。例如from:”“; to:”” 表示从任一状态到另一个任一状态的默认值,这意味着过渡用于每个状态的切换。
参考链接:QML进阶教程:四、状态(States)和过渡(Transitions)
QML其它文章请点击这里: QT QUICK QML 学习笔记