summaryrefslogtreecommitdiff
path: root/Item Size Position.md
blob: 3a6ba3015e8b20ac54f8170c59a0a862da9d50e6 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
[[Quickshell]]

---

`Item` type is the base type for "visual items". It has two properties:
- actual size ( width, height )
- implicit/desired size ( implicitWidth, implicitHeight )

Implicit size is used by containers to determine their own.

## Container items

Container (ie. `Item`):
```qml
implicitWidth: child.implicitWidth + margin * 2
implicitHeight: child.implicitHeight + margin * 2
```

^ `WrapperItem` does this margin for us.

Child (ie. `Rectangle`):
```qml
x: parent.margin
y: parent.margin
width: parent.width - parent.margin * 2
height: parent.height - parent.margin * 2
implicitWidth: 50
implicitHeight: 50
```
[Binding](https://doc.qt.io/qt-6/qml-qtqml-binding.html) can be used to map any property
[Anchors](https://doc.qt.io/qt-6/qtquick-positioning-anchors.html) are a shorthand way to achieve many common position and size bindings.

Using a containers' Item.childrenRect to determine size of children is a mistake.
Item.childrenRect represents the actual geometry of all child items, not the mplicit one.

Use [MarginWrapperManager](https://quickshell.org/docs/types/Quickshell.Widgets/MarginWrapperManager) to handle size and position of container and a single child item.