[SOLVED]Setting state in Loader component

minimoog77

Using PropertyChanges in loaded item Loader component, it's not working. Test example:

@import QtQuick 1.0

Rectangle {
id: testCase
width: 400
height: 100

Rectangle {
    id: blackRect
    color: "black"
    width: parent.width / 2
    anchors.top: parent.top
    anchors.bottom: parent.bottom
    anchors.left: parent.left

    MouseArea {
        anchors.fill: parent

        onClicked: {
            testCase.state == 'showcomponent' ? testCase.state = "" : testCase.state = "showcomponent";
            //this works
            //expandLoader.sourceComponent = expandedComponent;
            //expandLoader.item.opacity = 1;
        }
    }
}

Component {
    id: expandedComponent
    Item {
        id: expandedItem
        opacity: 0

        Rectangle {
            color: "blue"
            anchors.fill: parent
        }
    }
}

Loader {
    id: expandLoader
    anchors.left: blackRect.left
    anchors.right: parent.right
    anchors.top: parent.top
    anchors.bottom: parent.bottom
}

states: State {
    name: "showcomponent"
    PropertyChanges { target: expandLoader; sourceComponent: expandedComponent }
    PropertyChanges { target: expandLoader.item; opacity: 1 }
}

}
@

I am getting "QML PropertyChanges: Cannot assign to non-existent property "opacity" " error on line 52 when I click the mouse area. What's wrong? Why I cannot use PropertyChanges?

ngocketit

I guess that's because the second PropertyChanges is executed before the Loader finishes loading its component and expandLoader.item becomes invalid. That's why you get the error "non-existent property". The first PropertyChanges get executed first but it only assigns a value to the sourceComponent of the Loader and returns, then comes the second PropertyChanges, but there is no guarantee that at the time the second PropertyChanges starts, the source component of the Loader has been fully loaded.

You can fix it like this:
@
Loader {
id: expandLoader
anchors.left: blackRect.left
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: parent.bottom
onLoaded: item.opacity = 1;
}

states: State {
    name: "showcomponent"
    PropertyChanges { target: expandLoader; sourceComponent: expandedComponent }
}@

minimoog77

Thanks! I thought that there was problem that loader item was not fully loaded...

imrrk

hey i also have one problem with loader..........
consider the below code......

@import QtQuick 1.0

Rectangle {
id: container
width: 300
height: 500
color: "black"

Loader {
 id: loader
    width: 300
    height: 500
    anchors.rightMargin: 0
    anchors.fill: parent
    visible: source != ""

}

Column {
  x: 25
 y: 35
    opacity: 1
    clip: false
    anchors.verticalCenterOffset: 0
    anchors.horizontalCenterOffset: 0
    spacing: 10
    anchors.centerIn: parent
    visible: !loader.visible


   Button1 { label: "Play"; onClicked: container.state = "play"  }
    Button1 { label: "Controls"; onClicked: container.state = "control" }
    Button1 { label: "About Us"; onClicked: container.state = "aboutus" }
    Button1{ label: "Quit"; onClicked: Qt.quit(); }

}

Connections {
    target: loader.source != "" ? loader.item : null
   onClicked: loader.source = ""
}

states: [
    State {
       name: "play"
        PropertyChanges {
            target: loader
            x: 0
            y: 0
            anchors.rightMargin: 0
            anchors.bottomMargin: 0
            anchors.leftMargin: 0
            anchors.topMargin: 0
            source: "Play.qml"
        }
    },
    State {
        name: "control"
       PropertyChanges {
            target: loader
            x: 0
            y: 0
            anchors.rightMargin: 0
            anchors.bottomMargin: 0
            anchors.leftMargin: 0
            anchors.topMargin: 0
            source: "Control.qml"
        }
    },

    State {
       name: "aboutus"
      PropertyChanges {
            target: loader
            x: 0
            y: 0
            anchors.rightMargin: 0
            anchors.bottomMargin: 0
            anchors.leftMargin: 0
            anchors.topMargin: 0
            source: "Aboutus.qml"
        }
    }@

this code work fine....iand i am able to navigate through pages........but...if i made till changes in the above code...like the one below...the code doesnot work...
@import QtQuick 1.0

Rectangle {
id: container
width: 300
height: 500
color: "black"

item{
      id:item1;
      source:"/pics/sun.png";

}

Loader {
 id: loader
    width: 300
    height: 500
    anchors.rightMargin: 0
    anchors.fill: parent
    visible: source != ""

}

Column {
  x: 25
 y: 35
    opacity: 1
    clip: false
    anchors.verticalCenterOffset: 0
    anchors.horizontalCenterOffset: 0
    spacing: 10
    anchors.centerIn: parent
    visible: !loader.visible


   Button1 { label: "Play"; onClicked: container.state = "play"  }
    Button1 { label: "Controls"; onClicked: container.state = "control" }
    Button1 { label: "About Us"; onClicked: container.state = "aboutus" }
    Button1{ label: "Quit"; onClicked: Qt.quit(); }

}

Connections {
    target: loader.source != "" ? loader.item : null
   onClicked: loader.source = ""
}

states: [
    State {
       name: "play"
        PropertyChanges {
            target: loader
            x: 0
            y: 0
            anchors.rightMargin: 0
            anchors.bottomMargin: 0
            anchors.leftMargin: 0
            anchors.topMargin: 0
            source: "Play.qml"
        }
    },
    State {
        name: "control"
       PropertyChanges {
            target: loader
            x: 0
            y: 0
            anchors.rightMargin: 0
            anchors.bottomMargin: 0
            anchors.leftMargin: 0
            anchors.topMargin: 0
            source: "Control.qml"
        }
    },

    State {
       name: "aboutus"
      PropertyChanges {
            target: loader
            x: 0
            y: 0
            anchors.rightMargin: 0
            anchors.bottomMargin: 0
            anchors.leftMargin: 0
            anchors.topMargin: 0
            source: "Aboutus.qml"
        }
    }@

here i have just added image on rectangle...and then push buttons...but i am not able to navigate........
so please help me out.......