Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Load "complex" QML component with Loader



  • 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 =)



  • 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



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



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



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



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

    }

    @



  • 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
    


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



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



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


Log in to reply