# .frame()

[SwiftUI](https://lochiwei.gitbook.io/ios/swiftui) ⟩ [Layout](https://lochiwei.gitbook.io/ios/swiftui/view/layout) ⟩ frame

{% hint style="info" %}

{% endhint %}

{% tabs %}
{% tab title="🔴 主題" %}

* [ideal-size](https://lochiwei.gitbook.io/ios/swiftui/view/layout/view-size/ideal-size "mention")
  {% endtab %}

{% tab title="💈範例" %}

* [testframeview](https://lochiwei.gitbook.io/ios/swiftui/view/layout/frame/.frame/testframeview "mention") - demo [<mark style="color:orange;">**ideal size**</mark>](https://lochiwei.gitbook.io/ios/swiftui/view/layout/view-size/ideal-size), <mark style="color:orange;">**min width**</mark>.
* [testidealsizeview](https://lochiwei.gitbook.io/ios/swiftui/view/layout/frame/.frame/testidealsizeview "mention") - test [<mark style="color:orange;">**ideal size**</mark>](https://lochiwei.gitbook.io/ios/swiftui/view/layout/view-size/ideal-size) behaviors.
* [testlittlesquares](https://lochiwei.gitbook.io/ios/swiftui/view/layout/grids/vgridforeach/testlittlesquares "mention") - demo [<mark style="color:orange;">**adaptive layout**</mark>](https://lochiwei.gitbook.io/ios/swiftui/view/layout/adaptive-layout).
  {% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="danger" %}
.<mark style="color:purple;">**frame**</mark>() 只是改變 <mark style="color:red;">**parent's proposed size**</mark>，並非改變 **child view's size**，child view 本身的大小還是由 child view 自己決定❗️(👉 See: [testframeview](https://lochiwei.gitbook.io/ios/swiftui/view/layout/frame/.frame/testframeview "mention"))
{% endhint %}

{% hint style="info" %}
a view may behave differently <mark style="color:red;">**on each axis**</mark>.&#x20;

* <mark style="color:purple;">**Spacer**</mark> inside a <mark style="color:orange;">**VStack**</mark> will probably take <mark style="color:red;">**all space vertically**</mark>, but <mark style="color:red;">**no space horizontally**</mark>.&#x20;
* There are cases (e.g. [<mark style="color:purple;">**Text**</mark>](https://lochiwei.gitbook.io/ios/swiftui/control/text)) when the behavior <mark style="color:red;">**in one axis**</mark> will be <mark style="color:red;">**affected by the other**</mark>.
  {% endhint %}

####

#### Frame Behaviors

{% hint style="info" %}

* <img src="https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5-JmwCZMKh_d7RfBaN%2Fuploads%2FdVXsmgyhZTArcrxvRx86%2Fpull-in.jpg?alt=media&#x26;token=ed4f2745-d669-40d5-9480-8435e27d47c1" alt="" data-size="line"> <mark style="color:red;">**pull-in**</mark> views: \
  only take as much space as needed, e.g. <mark style="color:purple;">**HStack**</mark>/<mark style="color:purple;">**VStack**</mark>.
* <img src="https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5-JmwCZMKh_d7RfBaN%2Fuploads%2FdVXsmgyhZTArcrxvRx86%2Fpull-in.jpg?alt=media&#x26;token=ed4f2745-d669-40d5-9480-8435e27d47c1" alt="" data-size="line"> <mark style="color:green;">**adaptive**</mark> <mark style="color:red;">**pull-in**</mark> views: \
  take only what they need, if offered is not enough, they'll do their best (truncate or wrap) to respect the offered space, e.g. [<mark style="color:purple;">**Text**</mark>](https://lochiwei.gitbook.io/ios/swiftui/control/text).
* <img src="https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5-JmwCZMKh_d7RfBaN%2Fuploads%2F3B87hqej0rIvxYpR0crQ%2Fpush-out.jpg?alt=media&#x26;token=ba0b9aed-9d54-4ba4-844d-4dd2ff648614" alt="" data-size="line"> <mark style="color:red;">**push-out**</mark> views: \
  take all the space offered, e.g. <mark style="color:purple;">**Rectangle**</mark>.
* Custom views:\
  draw outside the area offered.
  {% endhint %}
  {% endtab %}

{% tab title="📘 手冊" %}

* SwiftUI ⟩ [Layout](https://developer.apple.com/documentation/swiftui/view-layout) ⟩&#x20;
  * [Laying Out a Simple View](https://developer.apple.com/documentation/swiftui/laying-out-a-simple-view)
  * [.frame(width:height:alignment:)](https://developer.apple.com/documentation/swiftui/view/frame\(width:height:alignment:\))
  * [.frame(minWidth:idealWidth:maxWidth ...)](https://developer.apple.com/documentation/swiftui/view/frame\(minwidth:idealwidth:maxwidth:minheight:idealheight:maxheight:alignment:\))
  * [fixedSize()](https://developer.apple.com/documentation/swiftui/view/fixedsize\(\)), [fixedSize(horizontal:vertical:)](https://developer.apple.com/documentation/swiftui/view/fixedsize\(horizontal:vertical:\)) - fixed <mark style="color:red;">**ideal size**</mark>.
  * [layoutPriority(\_:)](https://developer.apple.com/documentation/swiftui/view/layoutpriority\(_:\))
    {% endtab %}

{% tab title="📗 參考" %}

* [x] SwiftUI Lab ⟩ [Frame Behaviors with SwiftUI](https://swiftui-lab.com/frame-behaviors/)
* [x] Sarun ⟩ [Intrinsic content size in SwiftUI](https://sarunw.com/posts/intrinsic-content-size-in-swiftui/) ⭐️ - [ideal-size](https://lochiwei.gitbook.io/ios/swiftui/view/layout/view-size/ideal-size "mention")
  {% endtab %}

{% tab title="👥 相關" %}

* [.padding](https://lochiwei.gitbook.io/ios/swiftui/view/layout/.padding "mention")：會改變 *<mark style="color:purple;">**frame**</mark>*:exclamation:
* [stacks](https://lochiwei.gitbook.io/ios/swiftui/view/layout/stacks "mention")
* &#x20;can be used to align [text](https://lochiwei.gitbook.io/ios/swiftui/control/text "mention") . 👉 See: [Sarun](https://sarunw.com/posts/how-to-align-text-in-swiftui/)&#x20;
* can use [.testframe](https://lochiwei.gitbook.io/ios/swiftui/view/view/.testframe "mention") to test frame behaviors.
* convenience extensions: [ext](https://lochiwei.gitbook.io/ios/swiftui/view/layout/frame/ext "mention")
* can use [.dimension](https://lochiwei.gitbook.io/ios/swiftui/view/view/.dimension "mention") ([view](https://lochiwei.gitbook.io/ios/swiftui/view/view "mention") extension) to show a view's frame visually.
  {% endtab %}

{% tab title="❓" %}
{% hint style="warning" %}
問：如何製作一個像 [<mark style="color:purple;">**Text**</mark>](https://lochiwei.gitbook.io/ios/swiftui/control/text) 一樣的 custom view，可以根據 parent's offered size，調整成緊貼自己內容的 frame❓
{% endhint %}
{% endtab %}
{% endtabs %}