# view size

[SwiftUI](../..) ⟩ [view](..) ⟩ [layout]() ⟩ size&#x20;

{% hint style="info" %}
SwiftUI has [built-in views](../../term/built-in-view) that <mark style="color:yellow;">manage</mark> _<mark style="color:purple;">**size**</mark>_ <mark style="color:yellow;">in different ways</mark>:

* Expanding to <mark style="color:yellow;">fill the available space</mark> (offered by their 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) ...)
* Resizing to fit their content:\
  (have an <mark style="color:yellow;">ideal size that varies</mark> according to their <mark style="color:yellow;">contents</mark>)\
  ([`Text`](https://developer.apple.com/documentation/swiftui/text), [container views](../hierarchy/container) ...)
* Maintaining a specific size that doesn't change: \
  (have an <mark style="color:yellow;">ideal size that</mark> <mark style="color:red;">never</mark> <mark style="color:yellow;">varies</mark>)\
  ([`Toggle`](https://developer.apple.com/documentation/swiftui/toggle), [`DatePicker`](https://developer.apple.com/documentation/swiftui/datepicker)...)
{% endhint %}

{% tabs %}
{% tab title="📘 手冊" %}
* [Limit the view size](https://developer.apple.com/documentation/swiftui/laying-out-a-simple-view#Limit-the-view-size)
* [`frame(width:height:alignment:)`](https://developer.apple.com/documentation/swiftui/view/frame\(width:height:alignment:\))
{% endtab %}

{% tab title="👥 相關" %}
* [hierarchy](../hierarchy "mention")：<mark style="color:orange;">parent view</mark> <mark style="color:yellow;">proposes a</mark> _<mark style="color:purple;">**size**</mark>_ to the <mark style="color:orange;">child views</mark> it contains, and the <mark style="color:orange;">child views</mark> <mark style="color:yellow;">respond with a computed</mark> _<mark style="color:purple;">**size**</mark>_.
{% endtab %}

{% tab title="⭐️ 重點" %}
* Differennt type of views have their own space requirements within a [container](../hierarchy/container).
{% endtab %}
{% endtabs %}

