Item的state和states属性
所有Item都有个state属性,保存着当前状态的名字,默认值是空字符串(默认状态)
所有Item都有个states 属性,保存着当前Item的所有状态,类型是list < State >
State QML Type
Properties
- changes : list< Change >//状态的所有变化
- extend : string//指向当前状态基态的名字,基态的所有变化都会被继承
- name : string//状态名字
- when : bool //为true,应用该状态(置当前Item的state置为该状态名),为false切换到默认状态。当多个State的when为true时,第一个State生效(变为fasle时切换到下一个State为true的,没有切换到默认状态)。
应用状态两种方式:1设置Item的state(对应的状态when为false不会生效)2设置when为true(使用when时必须是绑定到表达式上。)
changes : list< Change >
- PropertyChanges 改变属性
- AnchorChanges 改变锚
- ParentChange 改变父项目
- StateChangeScript 运行脚本
- StateGroup
PropertyChanges
import QtQuick 2.0
Item {
id: container
width: 300; height: 300
Rectangle {
id: rect
width: 100; height: 100
color: "red"
MouseArea {
id: mouseArea
anchors.fill: parent
}
states: State {
name: "resized"; when: mouseArea.pressed
PropertyChanges { target: rect; color: "blue"; height: container.height }
}
}
}
AnchorChanges
import QtQuick 2.0
Rectangle {
id: window
width: 120; height: 120
color: "black"
Rectangle { id: myRect; width: 50; height: 50; color: "red" }
states: State {
name: "reanchored"
AnchorChanges {
target: myRect
anchors.top: window.top
anchors.bottom: window.bottom
}
PropertyChanges {
target: myRect
anchors.topMargin: 10
anchors.bottomMargin: 10
}
}
MouseArea { anchors.fill: parent; onClicked: window.state = "reanchored" }
}
ParentChange
import QtQuick 2.0
Item {
width: 200; height: 100
Rectangle {
id: redRect
width: 100; height: 100
color: "red"
}
Rectangle {
id: blueRect
x: redRect.width
width: 50; height: 50
color: "blue"
states: State {
name: "reparented"
ParentChange { target: blueRect; parent: redRect; x: 10; y: 10 }
}
MouseArea { anchors.fill: parent; onClicked: blueRect.state = "reparented" }
}
}
StateChangeScript
State {
name: "state1"
StateChangeScript {
name: "myScript"
script: doStateStuff();
}
// ...
}
相关链接
Qt Quick States