// 03-anchors/anchors.qml
// Anchors: manual positional layout. Use for one-off positioning.
// Pure QML. Run with: qml6 anchors.qml

import QtQuick
import QtQuick.Window

Window {
    width: 400
    height: 300
    visible: true
    title: "QML 03: Anchors"
    color: "#f5f5f5"

    // Top-left box: anchored to corners with margins
    Rectangle {
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.margins: 16
        width: 120; height: 80
        color: "tomato"
        radius: 4
        Text { anchors.centerIn: parent; text: "top-left"; color: "white" }
    }

    // Top-right: anchored top + right, centered horizontally
    Rectangle {
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.topMargin: 16
        anchors.rightMargin: 16
        width: 120; height: 80
        color: "steelblue"
        radius: 4
        Text { anchors.centerIn: parent; text: "top-right"; color: "white" }
    }

    // Center: full centerIn
    Rectangle {
        anchors.centerIn: parent
        width: 140; height: 100
        color: "mediumseagreen"
        radius: 8
        Text { anchors.centerIn: parent; text: "center"; color: "white"; font.bold: true }
    }

    // Bottom-stretch: fill the bottom edge
    Rectangle {
        anchors.bottom: parent.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.margins: 16
        height: 60
        color: "goldenrod"
        radius: 4
        Text { anchors.centerIn: parent; text: "bottom-stretch"; color: "white" }
    }
}