PropertyAction does not work with "AnchorChanges" element
This is a test showing my problem:
Window {
visible: true;width: 360;height: 360
MouseArea{
anchors.fill: parent
onClicked: container.state = (container.state=="estado1"?"estado2":"estado1")
}
Rectangle {
id: container
anchors.fill: parent
color: "red"
state: "estado1"
onStateChanged:console.log("state -> "+state)
Rectangle {
id: prueba
anchors.left: parent.left
height: 100
color: "blue"
onWidthChanged:console.log("width -> "+width)
onHeightChanged:console.log("height -> "+height)
onOpacityChanged:console.log("opacity -> "+opacity)
onYChanged: console.log("coordY -> "+y)
}
states: [
State {
name: "estado1"
PropertyChanges {
target: prueba
width: 300
opacity: 1
}
AnchorChanges {
target: prueba
anchors.bottom: container.bottom
}
},
State {
name: "estado2"
PropertyChanges {
target: prueba
width: 50
opacity: 0.5
}
AnchorChanges {
target: prueba
anchors.top: container.top
}
}
]
transitions:[
Transition {
ParallelAnimation {
PropertyAnimation {
target: prueba
properties: "width"
duration: 3000
}
PropertyAction {
target: prueba
property: "opacity"
}
/*PropertyAction {
target: prueba
property: "anchors.top" //doesn't work
//property: "anchors" //doesn't work neither
}*/
AnchorAnimation {
//works, but doesn't seem to be the most
//elegant solution to the problem
duration: 0
}
}
}
]
}
}
Here you can see a two-state item by changing several properties with PropertyChanges
as well AnchorChanges
. In addition, a Transition
is defined for state change control. In this transition, the property is width
animated with the element PropertyChanges
, and opacity
changes at the beginning of the transition without animation with PropertyAction
.
The problem is, I would like to change the anchor without animation as well. But, if I try to use PropertyAction
it doesn't work. I can use animations with a duration of 0, but I don't think this is the right approach. Are there any syntax problems, or maybe a different approach should be taken?
source to share
I asked for Qt support and this is what they say:
The reason this happens is because the anchor is treated differently and not as a property animation. What you need to do is use an AnchorAnimation and set a duration for it so it makes a move at the speed you want. If you want the binding change to take effect immediately, then you can do:
AnchorAnimation { duration: 1 }
and it will instantly move first until the rest of the animation is done.
Answer: your approach is correct. There is no easy way to skip using AnchorAnimation
.
source to share