# Adaptive Layout

:jigsaw:[SwiftUI](../..) ⟩ [Layout]() ⟩

{% tabs %}
{% tab title="🔴 主題" %}
* [size-classes](view-size/size-classes "mention")
* [dynamic-type-sizes](view-size/dynamic-type-sizes "mention")
{% endtab %}

{% tab title="📗 參考" %}
* [ ] FiveStars ⟩&#x20;
  * [x] [How to read a view size in SwiftUI](https://www.fivestars.blog/articles/swiftui-share-layout-information/)
  * [ ] [Flexible layouts in SwiftUI](https://www.fivestars.blog/articles/flexible-swiftui/) - <mark style="color:red;">**GridView**</mark>. ⭐️
  * [x] [How to make SwiftUI views adaptive](https://www.fivestars.blog/articles/adaptive-swiftui-views/)
* [ ] Design+Code ⟩ [Adaptive Layout](https://designcode.io/ios-design-handbook-adaptive-layout)
* [ ] Use Your Loaf ⟩ [SwiftUI Adaptive Stack Views](https://useyourloaf.com/blog/swiftui-adaptive-stack-views/)
* [x] Paul ⟩ [How to automatically switch between HStack and VStack based on size class](https://www.hackingwithswift.com/quick-start/swiftui/how-to-automatically-switch-between-hstack-and-vstack-based-on-size-class)
{% endtab %}

{% tab title="📘 手冊" %}
* [Human Interface Guidelines](https://developer.apple.com/design/human-interface-guidelines/) ⟩ [Adaptivity and Layout](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/) ⟩ [Size Classes](https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout#device-size-classes)
* SwiftUI ⟩ [State and Data Flow](https://developer.apple.com/documentation/swiftui/state-and-data-flow) ⟩ [EnvironmentValues](https://developer.apple.com/documentation/swiftui/environmentvalues) ⟩
  * [horizontalSizeClass](https://developer.apple.com/documentation/swiftui/environmentvalues/horizontalsizeclass) : [UserInterfaceSizeClass](https://developer.apple.com/documentation/swiftui/userinterfacesizeclass) (<mark style="color:red;">**enum**</mark>)
  * [verticalSizeClass](https://developer.apple.com/documentation/swiftui/environmentvalues/verticalsizeclass) : [UserInterfaceSizeClass](https://developer.apple.com/documentation/swiftui/userinterfacesizeclass) (<mark style="color:red;">**enum**</mark>)
{% endtab %}

{% tab title="👥 相關" %}
* [view-builder](../view-builder "mention")
* [size-classes](view-size/size-classes "mention")&#x20;
* [preferences](../../data-flow/preferences "mention") ⟩ [preferencekey](../../data-flow/preferences/preferencekey "mention")
{% endtab %}

{% tab title="💈範例" %}
* [adaptivehstack](stacks/adaptivehstack "mention")
{% endtab %}
{% endtabs %}
