OnCompleted doesn't work as expected (??)

  • Hi all,
    I'm coding a splash routine for my application.
    I would like to launch the animation as soon as the main Page has been loaded.
    Splash animation works using States and Transitions.
    Using a MouseArea and the buttonClicked event to change state, it works fine.
    However, triggering state change using Page onCompleted event doesn't work!!
    It seems that the other components are not yet correctly positioned, so anchors and x/y bindings are wrong.
    I don't understand why it works in this way.

    Any suggestions?

    Thanks in advance,

  • Do you have a small example you could post showing the problem?

  • You could try to use Component.onCompleted: { }. That, at least for me, works as expected.

  • Hi mbrasser, sorry but I modified the code because have to do the work!
    However, I used Component.onCompleted inside the page Component but it didn't work.

    Any ideas?
    Components anchors are wrongs moving from "" state to the first state (ie named "first"), as:
    Component.onCompleted: splash.state = "first"
    That doesn't work as expected.

    Do you have a working example that uses images to play a state/transition based splash screen?

  • Why don't you just initialize the state variable of your component with some state instead of trying to do it in the onCompleted method?

    But normally you would not want to initialize the first step to anything, but move to new states as something happens. If you want to go to the default state when something happens in the UI, just set the state to "".

  • I would like to start the splash animation on load, that's why I'm try changing the state with onCompleted. It seems that Page onCompleted call does not mean that internal components are loaded...

  • Perhaps the Page component itself (or another component involved) also does some work in onCompleted, and its onCompleted is being called after yours?

  • Yes, I think so, too. Do you have a workaround to suggest?

  • Hey, I have an idea that might solve your problem (solved for me).

    Try defining two states on your page, say "bootUp", "splash".
    states: [
    State {
    name: "bootUp"
    PropertyChanges {
    target: basePage
    y: -parent.heigth //just hiding the page..
    //here you should SET all the proper properties/anchors so that you ENFORCE that
    //they are SET before you move to the next state
    State {
    name: "splash"
    PropertyChanges {
    target: basePage
    y: 0
    StateChangeScript {
    name: "startSplashAnimation"
    script: doAnimation()
    And then try forcing the state change using either Component.onCompleted:
    Component.onCompleted: {
    state = "bootUp"//this will run all the scripts, set all the properties and etc on the bootUp state
    state = "splash"// you'll see that any scripts called from bootUp will be executed before this line

    or if that doesn't work, try (it's ugly but worked better for me)
    onVisibleChanged: {
    if( visible) {
    state = "bootUp"
    state = "splash"

    If your animations are simple, you can even use something like (to avoid using the StateChangeScript):
    transitions: [
    Transition {
    from: "bootUp"
    to: "splash"
    NumberAnimation {
    properties: "y"
    easing.type: Easing.OutExpo
    duration: 400

    Using some variant of this should make all work. Looks a bit ugly in the beginning but it actually makes sense. Good luck!

Log in to reply