import QtQuick.Controls
import QtQuick.Layouts

RowLayout {
    Label { text: "Name" }
    TextField {
        Layout.fillWidth: true
        Accessible.name: "Name"
    }
}

Item {
    implicitWidth: childrenRect.width
    implicitHeight: childrenRect.height

    Rectangle { width: 80; height: 40 }
}

# Layouts and geometry

Name one geometry owner per axis.
Use anchors for relationships between a few items and `QtQuick.Layouts` for rows, columns, grids, and stacks.

## Sizing contract

`implicitWidth` and `implicitHeight` state a preferred size.
`width` and `height` are the actual assigned size.
A layout reads size hints and assigns actual geometry to its children.
Inside a layout, use `Layout.preferredWidth`, `Layout.fillWidth`, and related attached properties rather than competing `width` bindings.

```qml
import QtQuick.Controls
import QtQuick.Layouts

RowLayout {
    Label { text: "Name" }
    TextField {
        Layout.fillWidth: true
        Accessible.name: "Name"
    }
}
```

Do not use anchors on an axis that a layout owns.
Anchoring both horizontal edges owns width; anchoring both vertical edges owns height.
`anchors.centerIn` owns position but not size.

## `childrenRect`

`childrenRect` is the bounding rectangle of actual child geometry.
It is valid when the children have geometry independent of the parent's size, for example:

```qml
Item {
    implicitWidth: childrenRect.width
    implicitHeight: childrenRect.height

    Rectangle { width: 80; height: 40 }
}
```

It creates a cycle only when child geometry depends back on the parent geometry being derived from `childrenRect`, such as a child with `anchors.fill: parent`.
Do not ban `childrenRect`; inspect the dependency graph.

Use Layouts or positioners when they directly express the intended structure.
Load the `gestalt` skill when choosing visual grouping, spacing, hierarchy, or composition.