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.
-
@LeLev
@
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Styles 1.4Page {
id: login_2
visible: true
x: 0
y: 0
z: 0
width: 720
height: 1280
property alias lp_button_2_Button: lp_button_2_ButtonTextField { 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!
3/10