Positioning problem, anchors not allowed

[kornicameister]

I am writing arkanoid-like game for a friend, and I have stuck on positioning two dynamically placed items.

I prepared my own grid like this

Item {
id: abstractGrid //this is the item which goes from top of the screen right to top of the toolBar
width: screen.width
anchors {
top: screen.top; bottom: toolBar.top
}

Image {
id: background
source: "resources/background.jpg"
anchors.fill: abstractGrid
fillMode: Image.PreserveAspectCrop

Item {
id: grid
anchors.fill: background

Item {
id: barGrid
width: grid.width-10; height: 20
anchors {bottom: grid.bottom ; centerIn: grid.Center}
}
}
}
}

where I am gonna place all stones to be hit along with my ball and bar.
Here is the code I use to create them (without stones at the moment)

function createBar(){
console.log("creating bar")
if(barComponent == null){
barComponent = Qt.createComponent("Bar.qml");
}
if(barComponent.status == Component.Ready){
var dynamicBar = barComponent.createObject(barGrid)
if(dynamicBar == null){
console.log("error creating bar " + barComponent.errorString()); return false;
}
dynamicBar.width = 50
dynamicBar.height = barGrid.height
dynamicBar.x = barGrid.width / 2
items[0] = dynamicBar;
createBall();
}else{
console.log("error loading block barComponent" + barComponent.errorString()); return false;
}
return true;
}

function createBall(){
console.log("creating ball")
if(balComponent == null){
balComponent = Qt.createComponent("Bal.qml");
}
if(balComponent.status == Component.Ready){
var dynamicBal = balComponent.createObject(grid)
if(dynamicBal == null){
console.log("error creating ball " + balComponent.errorString()); return false;
}
dynamicBal.type = Math.floor(Math.random() * 3)
dynamicBal.y = grid.height - barGrid.height - toolBar.height - 6
dynamicBal.x = barGrid.width / 2
dynamicBal.onBar = true
dynamicBal.height = 25
dynamicBal.width = 25
items[1] = dynamicBal
}else{
console.log("error loading block balComponent" + balComponent.errorString()); return false;
}
return true;
}

the are created without any error, but their relative positions are incorrect and look like this
https://lh5.googleusercontent.com/-wd0DPytNA74/TldHCxS-8FI/AAAAAAAABk4/-tZAJWdkkDA/s800/issue.png
but I want them to be positioned one above another directly.
the problem of course lies in anchoring, because the x-coordinate of tha bar and ball seems to be placed in their left side and not in the center.
To be precise, I am not sure whether or not I should use anchors here to place x-coordinate in the center of the object but I know that if I use any anchors.xx code it will prevent my items from moving which I require.
So how can I make x-coordinate to be placed in the center of the item ??

I attach code for bar and ball as well

import QtQuick 1.0

///there will be three possible bal (red,green,blue)

Item {
id: bal
property int type: 0
property bool nitro: false //ball goes fast
property bool destroyer: false //ball do not bounce from obstacles it goes throught them crushig em
property bool onBar: false

//setting the bal colour
Image {
id: bal_colour
anchors.fill: bal
smooth: true
source: {
if(type == 0){
return "resources/redBall.png";
}else if (type == 1){
return "resources/yellowBall.png";
}else{
return "resources/greenBall.png"
}
}
}
}


import QtQuick 1.0
import "logic/barMechanics.js" as BAR_MECHANIC

Rectangle {
id: bar
smooth: true
radius: 30
opacity: 0.9
gradient: Gradient {
GradientStop { position: 0.0 ; color: "red"}
GradientStop { position: 0.5 ; color: "yellow" }
GradientStop { position: 1.0 ; color: "black"}
}

signal clicked;
property real startX : 0
property real startY : 0

MouseArea { //!!!! <--- CUSTOMIZE IT ---> !!!!//
id: mouseArea
anchors.fill: bar
drag.target: bar
drag.axis: Drag.XAxis
drag.minimumX: 0
drag.maximumX: bar.parent.width - bar.width

onClicked: BAR_MECHANIC.launchTheBall();
}

//add animation movent - the blur effect and starts effect when launching the ball
}


Added after 1 19 minutes:

I found the solution for that
if you want to use anchors and than still have possibility to drag your object, you set anchors values to undefined in onPressed event

Note: Items cannot be dragged if they are anchored for the requested drag.axis. For example, if anchors.left or anchors.right was set for rect in the above example, it cannot be dragged along the X-axis. This can be avoided by settng the anchor value to undefined in an onPressed handler.