[SOLVED]Setting state in Loader component



  • 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?



  • 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 }
    }@
    


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



  • 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.......


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.