Load "complex" QML component with Loader

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

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

DropNod

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

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ï

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

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ï

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 ?

DropNod

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

ODБOï

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

DropNod

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!