Sibling anchors don't align properly



  • 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!



  • 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



  • Thank you, that resolved my problem.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.