Accessing TextField from Another QML File - qt

Question

I have two .qml files:
CustomText.qml:
Item
{
TextField
{
id: t1
placeholderText: qsTr("Enter name")
}
}
main.qml:
Window
{
visible: true
width: 640
height: 480
title: qsTr("Hello World")
CustomText {width: 200; height: 200}
Rectangle
{
id: r1
border.color: "black"
width: 200
height: 200
x: 200
y: 200
Text
{
text: t1.text
}
}
}
This code is not working, because the id is not known. How can I access the text from the TextField in main.qml?

Answer 1

There are a couple ways you can accomplish this, namely
Aliasing t1.text, Binding customText.text, or
Aliasing t1, Binding customText.t1.text
Note that in both methods, we'll need to provide an id to your instance of CustomText so that we can refer to it. In both methods, we'll also make use of property aliases. These allow you to expose certain properties of your CustomText.
Alias t1.text, Bind customText.text
// CustomText.qml
Item
{
property alias text: t1.text // set a property alias
TextField
{
id: t1
placeholderText: qsTr("Enter name")
}
}
// Main.qml
Window
{
visible: true
width: 640
height: 480
title: qsTr("Hello World")
CustomText { id: customText; width: 200; height: 200 } // provide an id for reference
Rectangle
{
id: r1
border.color: "black"
width: 200
height: 200
x: 200
y: 200
Text
{
text: customText.text // bind the text property
}
}
}
Alias t1, Bind customText.t1.text
// CustomText.qml
Item
{
property alias t1: t1 // set a property alias
TextField
{
id: t1
placeholderText: qsTr("Enter name")
}
}
// Main.qml
Window
{
visible: true
width: 640
height: 480
title: qsTr("Hello World")
CustomText { id: customText; width: 200; height: 200 } // provide an id for reference
Rectangle
{
id: r1
border.color: "black"
width: 200
height: 200
x: 200
y: 200
Text
{
text: customText.t1.text // bind the property
}
}
}
If you're only needing to use the text from the TextField and nothing else, I would recommend using the first method, since you still keep the rest of t1 encapsulated (one might also say a "private" variable).
Generally, never use the second method unless you're having to modify the entire t1 object outside the file. (There may be some exceptions, but such a pattern tends to suggest a flaw in the design pattern and require refactoring.) Stick with the first method. If you're finding yourself having to reference/modify other properties of the TextField (the placeholderText, font, etc), you should alias and expose those properties as well.