Daniel Sampras
Daniel Sampras

Reputation: 307

How to Delete an item after loading the component in QtQuick 1.1

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

Answers (2)

Konstantin T.
Konstantin T.

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

Amit Tomar
Amit Tomar

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

Related Questions