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
    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! :|



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

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



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



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



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