Reputation: 307
This question is regarding QtQuick 1.1, qml, GUI creation
So i have created a component with 3 items (image or rect etc.,) Because this is reused in many screens of my application.
In one particular screen there is need only 2 item.
So how to delete that one item after importing the component.
The below code is just for understanding the concept
My component is like
//Mycomponent.qml
Rectangle {
*code*
item { id: item1; *some code* }
item { id: item2; *some code* }
item { id: item3; *some code* }}
my Screen file will be
//MyScreen.qml
Rectangle {
MyComponent{ }
*some Code*
}
So how to reuse the same component and delete just one item from it?
Correct me if my question is wrong.
Thanks!!
Upvotes: 1
Views: 1412
Reputation: 1013
In most case you can just change the visibility of an object.
visible: false
or
opacity: 0
For example you can add alias property for it.
//Mycomponent.qml
Rectangle {
id: myRect
property alias item1Visible: item1.visible
Item { id: item1; }
Item { id: item2; }
Item { id: item3; }}
Then you can do
myRect.item1Visible = false
in js.
You can delete dynamicaly created objects.
rect.destroy();
Although you can delete statically created object in general it is bad idea.
Upvotes: 3
Reputation: 4858
I would suggest to further divide your individual items into smaller components, and build bigger components upon them. Will probably give you better re-usability in future components as well because you will have smaller pieces available to combine as and when required. Something like :
//MyReusableOne.qml
Item {
*code*
}
//MyReusableTwo.qml
Item {
*code*
}
//MyReusableThree.qml
Item {
*code*
}
//MyBiggerBlockOne.qml
Rectangle {
MyReusableOne{ id: item1; }
MyReusableThree{ id: item2; }
}
//MyBiggerBlockTwo.qml
Rectangle {
MyReusableTwo{ id: item3; }
MyReusableThree{ id: item4; }
}
And then use them as:
//MyScreen.qml
Rectangle {
MyBiggerBlockOne{ }
*some Code*
MyBiggerBlockTwo{ }
*some Code*
}
And if you insist on the way you have described, one crappy way could be :
Item
{
property var inValidItems : ['item2']
Component
{
id: item1
Rectangle { color: "red"; width: 100; height: 100 }
}
Component
{
id: item2
Rectangle { color: "green"; width: 100; height: 100 }
}
Component
{
id: item3
Rectangle { color: "yellow"; width: 100; height: 100 }
}
Loader { id: loader1; sourceComponent: item1; y : 0 }
Loader { id: loader2; sourceComponent: item2; y : 100}
Loader { id: loader3; sourceComponent: item3; y : 200}
Component.onCompleted:
{
if( inValidItems.indexOf('item1') >= 0 )
loader1.sourceComponent = undefined
if( inValidItems.indexOf('item2') >= 0 )
loader2.sourceComponent = undefined
if( inValidItems.indexOf('item3') >= 0 )
loader3.sourceComponent = undefined
}
}
P.S. Code are just for description, not checked for syntactic errors. Hope you get the idea.
Upvotes: 2