The Loader doesn't show anything

  • 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
        title: qsTr("IG API")
        header: Rectangle{
            width: parent.width
            height: parent.height/20
            color: "darkblue"
                text: qsTr("IG API")
                anchors.centerIn: parent
                color: "white"
        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 {
        property int a
        property int b
        Button{//Profile Picture
    Button{//Below Right
            contentItem: Image {
                source: "Images/freecoins.png"
                anchors.fill: parent
                    radius: this.width
                    border.color: "yellow"
                    border.width: 2
                    color: "transparent"
                id: popUpFreeCoinsloader
                sourceComponent: popUpFreeCoinsComponent
                active: false
                focus: true
                width: a-a/12
                height: b/7

    and finally this is PopUpFreeCoins.qml:

    import QtQuick 2.0
    import QtQuick.Controls 2.1
    Item {
        property int t
        property int c
            width: t-t/12
            height: c/7
                ListElement {
                    name: "ByFollow"
                    s: "Images/follow.png"
                ListElement {
                    name: "ByLike"
                    s: "Images/care.png"
                ListElement {
                    name: "ByComment"
                    s: "Images/chat.png"
                height: c/5
                orientation: ListView.Horizontal
                model: ff
                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! :|

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

  • I guess it comes from this line in your Loader:

    active: false

    Set it to true and it should be all good

  • @MaxL He has in his code: onClicked:

  • 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: {

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


    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() {

    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.

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

Log in to reply

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