Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Load "complex" QML component with Loader
Forum Updated to NodeBB v4.3 + New Features

Load "complex" QML component with Loader

Scheduled Pinned Locked Moved Solved QML and Qt Quick
10 Posts 3 Posters 1.5k Views 2 Watching
  • 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.
  • DropNodD Offline
    DropNodD Offline
    DropNod
    wrote on last edited by
    #1

    Hi, I would like to know how to load a "complex" QML component (in a .qml file) with the Loader. By complex I mean that in there are conditions, events ... When I load a .qml "complex" the Loader can not load it and do not display it ... How to do?

    Thank you in advance for your answers =)

    ODБOïO 1 Reply Last reply
    0
    • gfxxG Offline
      gfxxG Offline
      gfxx
      wrote on last edited by
      #2

      for example if you have some layout problem ... qtdesigner and debug show nothing or mysterious messages instead the right one, but the work not compile at all.

      regards

      bkt

      DropNodD 1 Reply Last reply
      0
      • DropNodD Offline
        DropNodD Offline
        DropNod
        wrote on last edited by
        #3

        Thank you for your answer, I will try to remove all layouts to see if it works. I'll keep you informed.

        1 Reply Last reply
        0
        • gfxxG gfxx

          for example if you have some layout problem ... qtdesigner and debug show nothing or mysterious messages instead the right one, but the work not compile at all.

          regards

          DropNodD Offline
          DropNodD Offline
          DropNod
          wrote on last edited by
          #4

          I deleted all the layouts of the loaded .qml but still the same problem ... No error message ... Another idea where is the problem coming from?

          ODБOïO 1 Reply Last reply
          0
          • DropNodD DropNod

            I deleted all the layouts of the loaded .qml but still the same problem ... No error message ... Another idea where is the problem coming from?

            ODБOïO Offline
            ODБOïO Offline
            ODБOï
            wrote on last edited by
            #5

            @DropNod hi,
            can you past your "complex" component's code here ?

            DropNodD 1 Reply Last reply
            0
            • ODБOïO ODБOï

              @DropNod hi,
              can you past your "complex" component's code here ?

              DropNodD Offline
              DropNodD Offline
              DropNod
              wrote on last edited by
              #6

              @LeLev

              @
              import QtQuick 2.12
              import QtQuick.Window 2.12
              import QtQuick.Controls 2.12
              import QtQuick.Controls.Styles 1.4

              Page {
              id: login_2
              visible: true
              x: 0
              y: 0
              z: 0
              width: 720
              height: 1280
              property alias lp_button_2_Button: lp_button_2_Button

                  TextField {
                      id: login_2_input_email_TextField
                      
                      Item {
                          id: login_2_input_email
                          x: 0
                          y: 0
                          width: 642
                          height: 103
                          z: 1
                  
                          Image {
                              id: login_2_input_email_Image
                              x: 0
                              y: 0
                              width: 642
                              height: 103
                              z: 1
                              source: "Login_img_3.png"
                          }
                          
              TextField   {
                      x: 43
                      y: 0
                      width: 556
                      height: 103
                      opacity: 1
                      z: 2
                      font.pointSize: 16
                      font.family: "Montserrat"
                      placeholderText: "Email"
                      background {opacity: 0}
                      color: "#F5C34E"
                      placeholderTextColor: "#CCD8E5"
                      onEditingFinished: if (login_2_input_email_TextField.text === "") {login_2_input_email_Image.source = "Login_img_3.png"}
                                         else {login_2_input_email_Image.source = "Login_img_5.png.png"}
                      onFocusChanged: if (focus === true) {login_2_input_email_Image.source = "Login_img_3.png"}
              
                  }
              }
              
              Item {
                  id: login_2_input_password
                  x: 0
                  y: 0
                  z: 1
                  width: 642
                  height: 103
              
                  Image {
                      id: login_2_input_password_Image
                      x: 0
                      y: 0
                      width: 642
                      height: 103
                      source: "Login_img_3.png"
                      z: 1
                  }
              
                  TextField {
                      id: login_2_input_password_TextField
                      x: 43
                      y: 0
                      width: 478
                      height: 103
                      color: "#f5c34e"
                      placeholderText: "Mot de passe"
                      background.opacity: 0
                      opacity: 1
                      placeholderTextColor: "#ccd8e5"
                      font.pointSize: 16
                      z: 2
                      font.family: "Montserrat"
                      echoMode: input_password_eye_CheckBox.checked? "Normal" : "Password"
                      onEditingFinished: if (login_2_input_password_TextField.text === "") {login_2_input_password_Image.source = "Login_img_3.png"}
                                         else {login_2_input_password_Image.source = "Login_img_5.png"}
                      onFocusChanged: if (focus === true) {login_2_input_password_Image.source = "Login_img_.png"}
                  }
              
                  Item {
                      id: input_password_eye
                      x: 528
                      y: 0
                      width: 82
                      height: 103
                      z: 2
              
                      CheckBox {
                          id: input_password_eye_CheckBox
                          x: 0
                          y: 0
                          z: 2
                          width: 82
                          height: 103
                          opacity: 0
                      }
              
                      Image {
                          id: input_password_eye_Image
                          x: 11
                          y: 22
                          z: 2
                          width: 60
                          height: 60
                          source: "Login_img_6.png"
                          opacity: input_password_eye_CheckBox.checked? 1 : 0.5
                      }
                  }
              }
              
              
              Item {
                  id: login_2_button_1
                  x: 0
                  y: 0
                  width: 329
                  height: 74
                  z: 1
              
                  Button {
                      id: login_2_button_1_Button
                      x: 0
                      y: 0
                      width: 329
                      height: 74
                      text: qsTr("")
                      opacity: 0
                      z: 1
                  }
              
                  Image {
                      id: login_2_button_1_Image
                      x: 0
                      y: 0
                      width: 329
                      height: 74
                      z: 1
                      source: "Login_img_7.png"
                      opacity: login_2_button_1_Button.pressed? 0.5 : 1
                  }
              }
              
              Image {
                  id: login_2_login_logo_Image
                  x: 0
                  y: 0
                  z: 1
                  source: "Login_img_10.png"
              }
              
              Image {
                  id: login_2_background
                  source: "Login_img_2.png"
                  z: 0
              }
              
              Item {
                  id: login_2_button_2
                  x: 0
                  y: 0
                  width: 50
                  height: 50
                  z: 1
              
                  Image {
                      id: login_2_button_2_Image
                      x: 16
                      y: 10
                      z: 1
                      source: "Login_img_9.png"
                      opacity: login_2_button_2_Button.pressed? 0.5 : 1
                  }
              
                  Button {
                      id: login_2_button_2_Button
                      x: 0
                      y: 0
                      z: 1
                      width: 50
                      height: 50
                      text: qsTr("")
                      opacity: 0
                  }
              }
              

              }

              @

              ODБOïO 1 Reply Last reply
              0
              • DropNodD DropNod

                @LeLev

                @
                import QtQuick 2.12
                import QtQuick.Window 2.12
                import QtQuick.Controls 2.12
                import QtQuick.Controls.Styles 1.4

                Page {
                id: login_2
                visible: true
                x: 0
                y: 0
                z: 0
                width: 720
                height: 1280
                property alias lp_button_2_Button: lp_button_2_Button

                    TextField {
                        id: login_2_input_email_TextField
                        
                        Item {
                            id: login_2_input_email
                            x: 0
                            y: 0
                            width: 642
                            height: 103
                            z: 1
                    
                            Image {
                                id: login_2_input_email_Image
                                x: 0
                                y: 0
                                width: 642
                                height: 103
                                z: 1
                                source: "Login_img_3.png"
                            }
                            
                TextField   {
                        x: 43
                        y: 0
                        width: 556
                        height: 103
                        opacity: 1
                        z: 2
                        font.pointSize: 16
                        font.family: "Montserrat"
                        placeholderText: "Email"
                        background {opacity: 0}
                        color: "#F5C34E"
                        placeholderTextColor: "#CCD8E5"
                        onEditingFinished: if (login_2_input_email_TextField.text === "") {login_2_input_email_Image.source = "Login_img_3.png"}
                                           else {login_2_input_email_Image.source = "Login_img_5.png.png"}
                        onFocusChanged: if (focus === true) {login_2_input_email_Image.source = "Login_img_3.png"}
                
                    }
                }
                
                Item {
                    id: login_2_input_password
                    x: 0
                    y: 0
                    z: 1
                    width: 642
                    height: 103
                
                    Image {
                        id: login_2_input_password_Image
                        x: 0
                        y: 0
                        width: 642
                        height: 103
                        source: "Login_img_3.png"
                        z: 1
                    }
                
                    TextField {
                        id: login_2_input_password_TextField
                        x: 43
                        y: 0
                        width: 478
                        height: 103
                        color: "#f5c34e"
                        placeholderText: "Mot de passe"
                        background.opacity: 0
                        opacity: 1
                        placeholderTextColor: "#ccd8e5"
                        font.pointSize: 16
                        z: 2
                        font.family: "Montserrat"
                        echoMode: input_password_eye_CheckBox.checked? "Normal" : "Password"
                        onEditingFinished: if (login_2_input_password_TextField.text === "") {login_2_input_password_Image.source = "Login_img_3.png"}
                                           else {login_2_input_password_Image.source = "Login_img_5.png"}
                        onFocusChanged: if (focus === true) {login_2_input_password_Image.source = "Login_img_.png"}
                    }
                
                    Item {
                        id: input_password_eye
                        x: 528
                        y: 0
                        width: 82
                        height: 103
                        z: 2
                
                        CheckBox {
                            id: input_password_eye_CheckBox
                            x: 0
                            y: 0
                            z: 2
                            width: 82
                            height: 103
                            opacity: 0
                        }
                
                        Image {
                            id: input_password_eye_Image
                            x: 11
                            y: 22
                            z: 2
                            width: 60
                            height: 60
                            source: "Login_img_6.png"
                            opacity: input_password_eye_CheckBox.checked? 1 : 0.5
                        }
                    }
                }
                
                
                Item {
                    id: login_2_button_1
                    x: 0
                    y: 0
                    width: 329
                    height: 74
                    z: 1
                
                    Button {
                        id: login_2_button_1_Button
                        x: 0
                        y: 0
                        width: 329
                        height: 74
                        text: qsTr("")
                        opacity: 0
                        z: 1
                    }
                
                    Image {
                        id: login_2_button_1_Image
                        x: 0
                        y: 0
                        width: 329
                        height: 74
                        z: 1
                        source: "Login_img_7.png"
                        opacity: login_2_button_1_Button.pressed? 0.5 : 1
                    }
                }
                
                Image {
                    id: login_2_login_logo_Image
                    x: 0
                    y: 0
                    z: 1
                    source: "Login_img_10.png"
                }
                
                Image {
                    id: login_2_background
                    source: "Login_img_2.png"
                    z: 0
                }
                
                Item {
                    id: login_2_button_2
                    x: 0
                    y: 0
                    width: 50
                    height: 50
                    z: 1
                
                    Image {
                        id: login_2_button_2_Image
                        x: 16
                        y: 10
                        z: 1
                        source: "Login_img_9.png"
                        opacity: login_2_button_2_Button.pressed? 0.5 : 1
                    }
                
                    Button {
                        id: login_2_button_2_Button
                        x: 0
                        y: 0
                        z: 1
                        width: 50
                        height: 50
                        text: qsTr("")
                        opacity: 0
                    }
                }
                

                }

                @

                ODБOïO Offline
                ODБOïO Offline
                ODБOï
                wrote on last edited by
                #7

                Are you able to show that page without the loader ?
                can you show a mockup of the layout you are trying to design ?

                @DropNod said in Load "complex" QML component with Loader:

                By complex I mean that in there are conditions, events

                Conditions and events it's very normal but,
                your component/Item encapsulation is complex. You have this ?

                Page{
                   TextField{ // Why all this inside the TextFied ??
                        Item{Image{TextField{}}
                        Item{Image{} TextField{}  Item{CheckBox{}Image{}}}
                        Item{Button{} Image{}}
                        Image{}
                        Image{}
                        Item{Button{} Image{}}
                   }
                }
                

                Why not use Qt Quick Layouts instead of manual positionning/sizing ?

                            x: 11
                            y: 22
                            z: 2
                            width: 60
                            height: 60
                
                DropNodD 1 Reply Last reply
                0
                • ODБOïO ODБOï

                  Are you able to show that page without the loader ?
                  can you show a mockup of the layout you are trying to design ?

                  @DropNod said in Load "complex" QML component with Loader:

                  By complex I mean that in there are conditions, events

                  Conditions and events it's very normal but,
                  your component/Item encapsulation is complex. You have this ?

                  Page{
                     TextField{ // Why all this inside the TextFied ??
                          Item{Image{TextField{}}
                          Item{Image{} TextField{}  Item{CheckBox{}Image{}}}
                          Item{Button{} Image{}}
                          Image{}
                          Image{}
                          Item{Button{} Image{}}
                     }
                  }
                  

                  Why not use Qt Quick Layouts instead of manual positionning/sizing ?

                              x: 11
                              y: 22
                              z: 2
                              width: 60
                              height: 60
                  
                  DropNodD Offline
                  DropNodD Offline
                  DropNod
                  wrote on last edited by DropNod
                  #8

                  @LeLev

                  Here is the model of the application, I crossed the name of the application for reasons of confidentiality. The encapsulation is good and I used the layouts but I deleted them following the answer of @gfxx, I will put them back after. I really do not see where the problem comes from ...

                  1 Reply Last reply
                  0
                  • DropNodD DropNod

                    Hi, I would like to know how to load a "complex" QML component (in a .qml file) with the Loader. By complex I mean that in there are conditions, events ... When I load a .qml "complex" the Loader can not load it and do not display it ... How to do?

                    Thank you in advance for your answers =)

                    ODБOïO Offline
                    ODБOïO Offline
                    ODБOï
                    wrote on last edited by
                    #9

                    @DropNod said in Load "complex" QML component with Loader:

                    how to load a "complex" QML component (in a .qml file) with the Loader

                    Same way as any "normal" Component.
                    What is the status of your loader ?

                    1 Reply Last reply
                    0
                    • DropNodD Offline
                      DropNodD Offline
                      DropNod
                      wrote on last edited by
                      #10

                      I managed to load my .qml file. I copied the command code by command until I found the error. It came from the command "property alias [...]", I do not know why, it caused a bug Qt. In any case thank you for your help!

                      1 Reply Last reply
                      0

                      • Login

                      • Login or register to search.
                      • First post
                        Last post
                      0
                      • Categories
                      • Recent
                      • Tags
                      • Popular
                      • Users
                      • Groups
                      • Search
                      • Get Qt Extensions
                      • Unsolved