Sibling anchors don't align properly

richterX

Hello,
I am just learning Qt Quick. I have a lot of experience developing Windows applications and some experience with web development and javascript (but its been a few months). I am trying to achieve this:
!http://dl.dropbox.com/u/47808160/whatIwant.PNG(whatIwant)!

But instead I get:
!http://dl.dropbox.com/u/47808160/whatIget.PNG(What I get)!

Here is my main code:
@Rectangle {
width: 800
height: 600
color: "#0E113D"

BatteryIndicator {
    id: batteryIndicator
    anchors.left: parent.left
    anchors.top: parent.top
    anchors.leftMargin: 10
    anchors.topMargin: 10
    borderColor: "#00A14B"
    fillColor: "#69BD45"
    fontColor: "#00A14B"
    percentage: 75
    statusMsg: "01:32"
}

SubsysIndicator {
    id: indicator1
    anchors.top: batteryIndicator.bottom
    anchors.topMargin: 30
    anchors.left: parent.left
    anchors.leftMargin: 10
    name: "ID1"
}

SubsysIndicator {
    id: indicator2
    anchors.verticalCenter: indicator1.verticalCenter
    anchors.left: indicator1.right
    anchors.leftMargin: 10
    name: "ID2"
}

SubsysIndicator {
    id: indicator3
    anchors.verticalCenter: indicator1.verticalCenter
    anchors.left: indicator2.right
    anchors.leftMargin: 10
    name: "ID3"
}

SubsysIndicator {
    id: indicator4
    anchors.verticalCenter: indicator1.verticalCenter
    anchors.left: indicator3.right
    anchors.leftMargin: 10
    name: "ID4"
}

}@

And here is my code for SubsysIndicator:

@Rectangle {
property string name: "sys#"
property string imageSource: ""

Text{
    id: label
    text: name
    color: "white"
    font.pixelSize: 18
    font.family: "Myriad Pro"
}

Image{
    id: icon
    source: "images/status-black.png"
    anchors.left: label.right
    anchors.leftMargin: 5
    anchors.verticalCenter: label.verticalCenter
}

}@

Thanks for the help!

mbrasser

Hi,

The issue is that the SubsysIndicator doesn't provide a size (and by default a Rectangle has a size of 0,0). If you want the size to be based on the Text/Image size, you could add:

@
width: childrenRect.width
height: childrenRect.height
@

to the Rectangle in SubsysIndicator.qml.

Regards,
Michael

richterX

Thank you, that resolved my problem.