Icreate my page1form in main.qml
inside a stackview.

ApplicationWindow {
visible: true
width: 640
height: 1134
title: qsTr("Optika")

StackView { id: stackView anchors.fill: parent Page1Form{ id: optikaPage } }

}

br, andrej

@dv__ said in QML animations with dynamic content:

Also, just out of curiosity, in a more generic case (say, some arbitrary, non-grid arrangement), would my approach make sense? I suppose I could still use ListModel in this case, but the arrangement would have to be done manually, not with an existing view.

To do this I'd use a raw Item container with a Repeater and manual positioning in the delegates.

@Eeli-K Correct :-)
Wow i don't know if it good or bad that i just spent almost 2 days for less than 10 rows of code :-)

OK
found a solution, for those interested, it's based on the fact that maybe the root item can't access the handle but the handle on the other hand can access the root item. So I created a binding between handle's state and slider's state :

Slider { anchors { fill: parent margins: 10; } id: slider value: 0.5 style : SliderStyle { groove: Rectangle { id: background /* ... */ } handle: Rectangle { id: handle /* ... */ opacity: 0.0 // Bind slider's state and handle's state state: slider.state == "hovered" ? "hovered" : "" states : [ State { name: "hovered" PropertyChanges { target: handle ; opacity: 1.0 } } ] } } MouseArea { anchors.fill: parent hoverEnabled: true onEntered: { slider.state = "hovered" } onExited: { slider.state = "" } } states: [ State { name: "hovered" } ] }

Hi again,

I got something working and I thought I would share how I proceeded.

In my application, the active/visible Tab is selected programmatically. As stated in the original message, the content of the Tab is dependent on the result/state of an external test. That test might be completed before the Tab is made visible.

So, I first defined a set of enumerators in C++, made available to my QML code by using Q_ENUM macro and used Q_PROPERTY to define a variable in C++ that can be accessed in QML. Let's refer to this variable as testResult.

I also used a set of (internal) State in my QML Tab content (see original post). In the QML file defining the Tab content, I added a Component.onCompleted which is used to the internal State based on the value of testResult. Once the Tab is visible, different controls (BUTTON) are used to let the operator select different operations, repeating the execution of the test for example, setting a new value to the internal State.

Using QML State allows me to take advantage of onStateChange, and consequently set the visible content of the Tab according to the internal State.

Communication between C++ and QML when the value of testResult changes is achieved using an emit notification.

This solution avoids exposing internal QML State values and the variable testResult to the javascript code I am using.

Thanks,
Daniel

@Mark81 Well, I've just discovered the objectName property. Not so straight (it requires cycling among all children) but it works.

@Mark81
forget what i said, this wasn't correct. sorry.

In the Transition object you should fill the "from" and "to" porperties with names of the states.
So you need a transition from state to state.

@Wieland I have tried what you said and I am having this error: Cannot assign to non-existent default property at line StateGroup.
This is my code:

MessageDialog { id: msgDialog icon: StandardIcon.Warning; standardButtons: StandardButton.Ok StateGroup { id: msgDialogStates states: [ State { name: "ActionsDialog" PropertyChanges { target: msgDialog title: qsTr("Actions Error") text: qsTr("Message.") } }, State { name: "PropertiesDialog" PropertyChanges { target: msgDialog title: qsTr("Properties Error"); text: qsTr("Another.") } } ] } }

The lines with the properties: title, text, icon and standardButtons are in red as I mencioned in another post.

All programming languages offer features to shoot yourself in the foot ;)

Glad you found out and thanks for sharing :)

Happy coding !

Hi again:

I've prepared a testing qml to show the issue:

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 } } } ] } }

If you run this example as is, you can see that the anchor change is performed at the beginning of the transition, because of the animation with duration=0. I think this is not very correct, since you really don't need an animation for that.

For PropertyChanges, you can use the PropertyAction, as can be seen for the opacity change in the example. But, the PropertyAction doesn't work with the AnchorChange. I don't know if this is because of the sintax, or really PropertyAction cannot be used in this situation. I would like to know what is the best and more correct approach to do that.

Thanks for your patience

@vishnu

I have a right-arrow button on my footer where i am pushing a qml file upon clicking. when it is loaded how to disable this button on the footer?

enabled = false on click

How can make a check before pushing If that is alread in the stack i don't the push it?

2 ways.

var myItem = stackView.push( { item: Qt.resolvedUrl("DetailedView.qml"), destroyOnPop:false } ); //check myItem and store it somewhere if(myItem) { } var myItem = stackView.push( { item: Qt.resolvedUrl("DetailedView.qml"), destroyOnPop:false } ); var comp=stackView.get(myItem.Stack.index); //need the item to get its index and not just Stack.index

@vishnucool220 A little bit on explanation would be helpful alongside just downvoting.

@svyatoslav911512 You can read more about property binding here. Happy coding..