Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Solved The Loader doesn't show anything

    QML and Qt Quick
    4
    6
    2885
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • N
      no_ideaw last edited by A Former User

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

      E 1 Reply Last reply Reply Quote 0
      • E
        Eeli K @no_ideaw last edited by

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

        1 Reply Last reply Reply Quote 0
        • M
          MaxL last edited by

          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

          E 1 Reply Last reply Reply Quote 0
          • E
            Eeli K @MaxL last edited by

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

            1 Reply Last reply Reply Quote 0
            • J
              JapieKrekel last edited by

              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.

              N 1 Reply Last reply Reply Quote 2
              • N
                no_ideaw @JapieKrekel last edited by

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

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post