# view layout

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

{% hint style="info" %}
SwiftUI layout system:

1. <mark style="color:green;">**Parent**</mark> <mark style="color:red;">**proposes**</mark> a **size** for child.
2. <mark style="color:orange;">**Child**</mark> <mark style="color:red;">**chooses**</mark> its own size.
3. <mark style="color:green;">**Parent**</mark> <mark style="color:red;">**places**</mark> <mark style="color:orange;">**child**</mark> in **parent’s coordinate space**.
   {% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="info" %}
SwiftUI views manage size in different ways:

* "<mark style="color:red;">**push-out**</mark>" views: **expand to fill** space offered by parent. \
  👉[`Color`](https://developer.apple.com/documentation/swiftui/color), [`LinearGradient`](https://developer.apple.com/documentation/swiftui/lineargradient), [`Circle`](https://developer.apple.com/documentation/swiftui/circle)...&#x20;
* "<mark style="color:red;">**pull-in**</mark>" views: have **ideal size** that varies according to their contents. \
  👉 [`Text`](https://developer.apple.com/documentation/swiftui/text) , container views (HStack, VStack , ...)
* "<mark style="color:red;">**fixed**</mark>" views: have ideal size that **never varies**.\
  👉 [`Toggle`](https://developer.apple.com/documentation/swiftui/toggle) or [`DatePicker`](https://developer.apple.com/documentation/swiftui/datepicker)...
  {% endhint %}
  {% endtab %}

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

* [.frame](https://lochiwei.gitbook.io/ios/swiftui/view/layout/frame/.frame "mention")
* [adaptive-layout](https://lochiwei.gitbook.io/ios/swiftui/view/layout/adaptive-layout "mention")
* [alignment](https://lochiwei.gitbook.io/ios/swiftui/view/layout/alignment "mention")
* [grids](https://lochiwei.gitbook.io/ios/swiftui/view/layout/grids "mention")
  {% endtab %}

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

* [ ] Paul ⟩ [The Complete Guide to Layout in SwiftUI](https://www.hackingwithswift.com/articles/217/complete-guide-to-layout-in-swiftui)
* [ ] objc.io ⟩&#x20;
  * [ ] Thinking in SwiftUI, Ch. 4: Layout
  * [ ] Swift Talk ⟩ [SwiftUI Layout Explained](https://talk.objc.io/collections/swiftui-layout-explained)
* [ ] Majid ⟩&#x20;
  * [ ] [Layout priorities in SwiftUI](https://swiftwithmajid.com/2020/04/15/layout-priorities-in-swiftui/)
  * [x] [The magic of fixed size modifier in SwiftUI](https://swiftwithmajid.com/2020/04/29/the-magic-of-fixed-size-modifier-in-swiftui/)
  * [x] [Frames in SwiftUI](https://swiftwithmajid.com/2021/06/02/frames-in-swiftui/)
* [x] Sundell ⟩ A guide to the SwiftUI layout system -&#x20;
  * [x] [Part 1](https://www.swiftbysundell.com/articles/swiftui-layout-system-guide-part-1/)
  * [x] [Part 2](https://www.swiftbysundell.com/articles/swiftui-layout-system-guide-part-2/)&#x20;
* [ ] 知乎 ⟩ [SwiftUI 成神之路](https://www.zhihu.com/column/c_1264596761944944640) ⟩ [SwiftUI 之 Layout 基礎篇](https://zhuanlan.zhihu.com/p/166119111)
  {% endtab %}

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

* [SwiftUI](https://developer.apple.com/documentation/swiftui) ⟩ [View Layout and Presentation](https://developer.apple.com/documentation/swiftui/view-layout-and-presentation)
  * [x] [Laying Out a Simple View](https://developer.apple.com/documentation/swiftui/laying-out-a-simple-view)
  * [ ] [Picking Container Views for Your Content](https://developer.apple.com/documentation/swiftui/picking-container-views-for-your-content)
  * [ ] [Making Fine Adjustments to a View's Position](https://developer.apple.com/documentation/swiftui/making-fine-adjustments-to-a-view-s-position)
  * [ ] [Building Layouts with Stack Views](https://developer.apple.com/documentation/swiftui/building-layouts-with-stack-views)  ⭐️
  * [ ] Types for Layout ⟩
    * [Form](https://developer.apple.com/documentation/swiftui/form)
    * [List](https://developer.apple.com/documentation/swiftui/list)
    * [Section](https://developer.apple.com/documentation/swiftui/section) - used in [`List`](https://developer.apple.com/documentation/swiftui/list), [`Picker`](https://developer.apple.com/documentation/swiftui/picker), and [`Form`](https://developer.apple.com/documentation/swiftui/form)
    * [Group](https://developer.apple.com/documentation/swiftui/group)
    * [GroupBox](https://developer.apple.com/documentation/swiftui/groupbox)
    * [ControlGroup](https://developer.apple.com/documentation/swiftui/controlgroup)
      {% endtab %}

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

* [geometryreader](https://lochiwei.gitbook.io/ios/swiftui/view/measure/geometryreader "mention") is often used to do custom layout.
* [preferencekey](https://lochiwei.gitbook.io/ios/swiftui/data-flow/preferences/preferencekey "mention")
* [cannot-convert-value-of-type-self-to-expected-argument-type-binding-less-than-c-greater-than](https://lochiwei.gitbook.io/ios/swiftui/view/layout/cannot-convert-value-of-type-self-to-expected-argument-type-binding-less-than-c-greater-than "mention")\
  ⛔️ error occurred when designing protocol for layout.
  {% endtab %}
  {% endtabs %}