Can I create object in QML?

[chong_kimkeang]

I want my program to create a new rectangle whenever I click on a button. So if I click it five times, it will create five Rectangles. How can I do this in QML?

[wysota]

You need to have a component and create an object from it every time a click occurs on a mouse area.

[chong_kimkeang]

Now I can create the object but the problem is the objects that I create are standing on the same x,y whenever I zoom the image that is the background. How can the objects go to the right position whenever i zoom the background? Ex:
I have an image that is the background then I create some rectangles by click a button. When I want this app to be bigger or expend its height or width, how can I make all the objects of rectangle to be zoom in their position? because when I change the side of the background, all the width and height have change but the rectangle's x and y are not change. Can you help me?

[wysota]

How can the objects go to the right position whenever i zoom the background?

You can move each item you create anywhere you want e.g. by settings its x and y properties.

[chong_kimkeang]

it not the thing easy like this. it like you are using StickyNote to stick it on the background and while the background is zooming, all the stickyNote will zoom according to the parent and they are at the correct location. But I can't get the right location of all the stickyNote when zoom.

In my app, i create the rectangle as the component that i use it as the stickyNote and I call it using function createObject(parent,{x,y}) in onClicked event. of course I can create them but when I zoom the background they are not change their position to the correct location(x,y) but they still remember their old position(x,y) that is not fit with the background that have been zoomed. What can I do that?

[wysota]

How do you "zoom" the background?

[chong_kimkeang]

Press the Maximize button or zoom by the width or height that we have these functionality from the form.

[wysota]

So that's not zooming, that's resizing. In this case setting absolute values for x and y will not work because they will still be at the same place when the item is resized. You need to specify the position in fractions of the position of the resized item (e.g. by putting the items you create in a layout or making a property bind between the width/height of the parent item and x/y of the created item.

[chong_kimkeang]

It sound complex, how can I bind the width/ height of the parent item and x/y of the created item if the x/y of the item are not change while I resize the background? could you give me example of code because I have never use binding?

[wysota]

could you give me example of code because I have never use binding?

Of course you have, here is a simple binding between two items:

Rectangle {
  id: root
  Rectangle {
    x: root.width/3
    y: 10+root.height/4
    width: 100
    height: 100
  }
}

Rectangle {
  id: root
  Rectangle {
    x: root.width/3
    y: 10+root.height/4
    width: 100
    height: 100
  }
}

To copy to clipboard, switch view to plain text mode 

[chong_kimkeang]

This is not the dynamic re-locate that stickyNote. If I create many stickyNote then when I resize they will go to the same place and all my sticky note can be moved over the background. So how can they catch their new location(x,y) when I resize the background?