The Loader doesn't show anything

[no_ideaw]

I'm coding an application UI by QML but I am new to it and every time, I see too many errors :/
As I said, my last problem is:
I have defined a Loader but it doesn't show anything! I will put files here. The Problem is MainMenuButtons.qml file that the Loader popUpFreeCoinsloader doesn't show anything.
this main.qml :

import QtQuick 2.8
import QtQuick.Window 2.2
import QtQuick.Controls 2.1
ApplicationWindow{
    title: qsTr("IG API")
    header: Rectangle{
        width: parent.width
        height: parent.height/20
        color: "darkblue"
        Text{
            text: qsTr("IG API")
            anchors.centerIn: parent
            color: "white"
        }
    }
    width:480
    height:640
    color: "purple"
    MainMenuButtons{a:parent.width; b:parent.height}
}

and this MainMenuButtons.qml that contains Loader popUpFreeCoinsloader:

import QtQuick 2.0
import QtQuick.Controls 2.1
Item {
    id:it
    property int a
    property int b
    Button{//Profile Picture
        id:profilePicture
        height:width
        width:it.a/4
        x:it.a/2-this.width/2
        y:it.a/4
    }
Button{//Below Right
        width:profilePicture.width/2
        height:profilePicture.width/2
        x:profilePicture.x+profilePicture.width
        y:profilePicture.y+profilePicture.height
        contentItem: Image {
            source: "Images/freecoins.png"
            anchors.fill: parent
            Rectangle{
                anchors.fill:parent
                radius: this.width
                border.color: "yellow"
                border.width: 2
                color: "transparent"
            }
        }
        onClicked: popUpFreeCoinsloader.active=true
        Loader{
            id: popUpFreeCoinsloader
            sourceComponent: popUpFreeCoinsComponent
            active: false
            focus: true
            width: a-a/12
            height: b/7
        }
        Component{
            id:popUpFreeCoinsComponent
            PopUpFreeCoins{t:a;c:b}
        }
}
}

and finally this is PopUpFreeCoins.qml:

import QtQuick 2.0
import QtQuick.Controls 2.1
Item {
    property int t
    property int c
    Popup{
        width: t-t/12
        height: c/7
        ListModel{
            id:ff
            ListElement {
                name: "ByFollow"
                s: "Images/follow.png"
            }
            ListElement {
                name: "ByLike"
                s: "Images/care.png"
            }
            ListElement {
                name: "ByComment"
                s: "Images/chat.png"
            }
        }
        ListView{
            width:t-t/10
            height: c/5
            layoutDirection:Qt.LeftToRight
            orientation: ListView.Horizontal
            model: ff
            spacing:10
            delegate: Button{
                contentItem:  Image{
                    source: s
                    width: (t-20-t/20)/3
                    height: c-c/10
                }}
        }
    }
}

there's no problem in syntax but popUpFreeCoinsloader doesn't work! :|

[Eeli K]

@no_ideaw Have to tried to use the open() method of the Popup? I think it's not visible by default. And maybe declare the Popup directly as the root item without Item?

[MaxL]

I guess it comes from this line in your Loader:

active: false

Set it to true and it should be all good

http://doc.qt.io/qt-5/qml-qtquick-loader.html#active-prop

[Eeli K]

@MaxL He has in his code: onClicked: popUpFreeCoinsloader.active=true

[JapieKrekel]

You use a Popup element, in order to actually pop up you need to call open()
As a simple test you could add the following to your Popup element.

 Component.onCompleted: open()

I tested your example, and I also noticed that the Loader is a child of the Button. Therefore the Popup will be positioned relative to the button.
In order to get your example running I had to add visible: true to the ApplicationWindow in order to acually show up.
Next to that I had to fix a binding loop. The parent.width and parent.height of the Rectangle element of the header, did not work for me. I added an id to the ApplicationWindow and used that id instead of parent to get rid of the binding loop.
Also I did not quite understand the reason for the Item element as being the root of the PopupFreeCoins.qml. In the example you give it would be sufficient to have the Popup element to be the root element. Simply remove the Item and move the properties into the Popup, or better your you probably do not need the properties, since you can then directly access the width and the height.
Removing the Item element also directly gives you access to the open() method of the Popup.
You could then do the following to open the popup when the button is pressed:

onClicked: {
   popUpFreeCoinsloader.active=true
   popUpFreeCoinsloader.item.open()
}

Or if you removed the Item element you could add the following in the Loader:

onLoaded: item.open()

If you need the Item as being the root element because maybe you have more stuff in there, then to get more control you could add a function to the item that in turn calls the open of the popup.
Add an id to the Popup to reference it

function showPopup() {
   popupId.open()
}

And then instead of calling the open function when the button is clicked or the Loader finished loading you could call the showPopup function.

Hope it helps and happy Qting.

[no_ideaw]

@JapieKrekel It worked! Thank You so much bro :)