Absolute QML newbie lost on alignment on anchors

[idlefrog]

I'm trying to do the business card example. Using anchors, I'm trying to show two rows of text, the 'name', and 'address'. But both are on top of each other:

import QtQuick

Window {
    width: height*1.586
    height: 480

    visible: true
    title: qsTr("Business Card")

    component ContactInfo: QtObject {
        property string name
        property string address
    }

    ContactInfo {
        id: myContactInfo
        name: "Ms Just Lost"
        address: "Candy Cane Lane"
    }

    Rectangle{
        id: name
        anchors.top: parent.top
        anchors.left: parent.left
        Text{
            text: myContactInfo.name
            font.pointSize: 30
        }

    }
    Rectangle{
        id:address
        anchors.top: name.bottom
        anchors.left: name.left
        Text{
            text: myContactInfo.address
            font.pointSize: 15
        }
    }
}

Why does this not work?
The Rectangle 'name' is in position top left of the parent.
The Rectangle 'address' be below the 'name' rectangle.
Guess I'm looking for some hints rather than any given solution.
Why is this wrong?

[JKSH]

@idlefrog said in Absolute QML newbie lost on alignment on anchors:

@jeremy_k Oh, so you are saying the Rectangle does not implicitly take the size of the Text!
Hence, the parent Rectangle should take the size of the text explicitly?

That's right. You can confirm by adding this to your Window, then look at your application output when you run it:

Component.onCompleted: {
    console.log("Name width:", name.width)
    console.log("Name height:", name.height)
}

[jeremy_k]

@idlefrog said in Absolute QML newbie lost on alignment on anchors:

Guess I'm looking for some hints rather than any given solution.

What is the size of the name Rectangle, and what is the coordinate if its bottom left corner?

[idlefrog]

@jeremy_k Oh, so you are saying the Rectangle does not implicitly take the size of the Text!
Hence, the parent Rectangle should take the size of the text explicitly?

(I did quickly look at the solution, but that didn't explain to me why my micro attempt was off the beaten track. :( )

[JKSH]

@idlefrog said in Absolute QML newbie lost on alignment on anchors:

@jeremy_k Oh, so you are saying the Rectangle does not implicitly take the size of the Text!
Hence, the parent Rectangle should take the size of the text explicitly?

That's right. You can confirm by adding this to your Window, then look at your application output when you run it:

Component.onCompleted: {
    console.log("Name width:", name.width)
    console.log("Name height:", name.height)
}

[jeremy_k]

@idlefrog said in Absolute QML newbie lost on alignment on anchors:

Hence, the parent Rectangle should take the size of the text explicitly?

Depending on the use case, possibly. Some padding is probably desirable for legibility and aesthetic concerns. It might also be desirable to force the child Text to fit within a parent and resort to eliding.

[idlefrog]

@JKSH said in Absolute QML newbie lost on alignment on anchors:

Component.onCompleted: {
console.log("Name width:", name.width)
console.log("Name height:", name.height)
}

That's very useful! It helped me a lot. Thank you!

[idlefrog]

Thank you for all your hint/suggestions. Just to get things aligned, I did this:

 Rectangle{
        id: name
        anchors.top: parent.top
        anchors.left: parent.left
        width: name_text.width
        height: name_text.height
        color: "blue"
        Text{
            id: name_text
            text: myContactInfo.name
            font.pointSize: 30
        }

    }
    Rectangle{
        id:address
        anchors.top: name.bottom
        anchors.left: name.left
        width: address_text.width
        height: address_text.height
        color: "green"
        Text{
            id:address_text
            text: myContactInfo.address
            font.pointSize: 15
        }
    }

So I gave both Rectangles a reference to the child Text items.
Thanks guys!

[JKSH]

You're welcome! Thank you for sharing your journey and your solution.

Here are some additional tidbits that might be of interest to you:

Anchor default values

Items are always placed at their parent's top-left by default. So, you can omit these lines and still get the same result:

anchors.top: parent.top
anchors.left: parent.left

Having said that, you can also keep them for clarity.

Label vs. Text

Displaying text inside a coloured rectangle is a very common requirement. You can simplify your code by using Label instead (https://doc.qt.io/qt-6/qml-qtquick-controls-label.html ). Add import QtQuick.Controls.Basic and try the following:

Label {
    id: name
    background: Rectangle { color: "blue" }
    text: myContactInfo.name
    font.pointSize: 30
}
Label {
    id: address
    anchors.top: name.bottom
    background: Rectangle { color: "green" }
    text: myContactInfo.address
    font.pointSize: 15
}

Note: One difference is that Label might change your font colour based on your OS settings (e.g. dark mode)

Positioners vs. Anchors

See https://doc.qt.io/qt-6/qtquick-positioning-layouts.html -- instead of anchoring your 2nd label to the 1st label, you could put them inside a Column:

Column {
    // Quiz (open-book): What is the width and height of this Column?

    Label {
        id: name
        background: Rectangle { color: "blue" }
        text: myContactInfo.name
        font.pointSize: 30
    }
    Label {
        id: address
        background: Rectangle { color: "green" }
        text: myContactInfo.address
        font.pointSize: 15
    }
}