# ideal size

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

{% hint style="info" %}
ideal size (🚧)

🚧
{% endhint %}

{% tabs %}
{% tab title="⭐️ 重點" %}
{% hint style="danger" %}
雖然 [.frame(minWidth:idealWidth ...)](https://developer.apple.com/documentation/swiftui/view/frame\(minwidth:idealwidth:maxwidth:minheight:idealheight:maxheight:alignment:\)) 可以用來宣告 <mark style="color:red;">**ideal size**</mark>，但**必須搭配** [.fixedSize()](https://developer.apple.com/documentation/swiftui/view/fixedsize\(\)) 才會真正發生作用❗️
{% endhint %}
{% endtab %}

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

* [testidealsizeview](https://lochiwei.gitbook.io/ios/swiftui/view/layout/frame/.frame/testidealsizeview "mention") - source code for the [YouTube](https://youtu.be/gk4lV0yDGXc) video above.

![](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5-JmwCZMKh_d7RfBaN%2Fuploads%2Fj7XNHfNIM87NveskvOaf%2Fideal%20size.png?alt=media\&token=d1ae199f-30d6-45ac-b2ce-c8bbe8854407)

```swift

/*
     Intrinsic Content Size (ideal size):
     ------------------------------------
     🔸 1. define ideal size (SwiftUI won't respect it at first).
     🔸 2. use `.fixedSize()` to respect ideal size.
     🔸 3. use `.frame(width:height:) to override.
     🔸 4. can mix (2) / (3)
 */

struct ContentView: View {
    var body: some View {
        VStack {
            rect()
                .fixedSize()    // ⭐️ 2. respect ideal width/height
            rect(.blue)         // ⭐️ 2. respect ideal height
                .fixedSize(horizontal: false, vertical: true)
            rect(.orange)       // ⭐️ 2. respect ideal width
                .fixedSize(horizontal: true, vertical: false)
            rect(.purple)       // ⭐️ 3. override both
                .frame(width: 150, height: 20)
            rect(.green)        // ⭐️ 4. respect height, override width
                .fixedSize(horizontal: false, vertical: true)
                .frame(width: 200)
        }.padding()
    }
}

extension ContentView {
    func rect(_ color: Color = .pink) -> some View {
        Rectangle()
            .frame(idealWidth: 100, idealHeight: 100)    // 1.
            .foregroundColor(color)
    }
}
```

{% endtab %}

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

* SwiftUI ⟩&#x20;
  * &#x20;[View](https://developer.apple.com/documentation/swiftui/view) ⟩&#x20;
    * [.fixedSize()](https://developer.apple.com/documentation/swiftui/view/fixedsize\(\))：Fixes view at its [ideal-size](https://lochiwei.gitbook.io/ios/swiftui/view/layout/view-size/ideal-size "mention"). (both width and height)
    * [.fixedSize(horizontal:vertical:)](https://developer.apple.com/documentation/swiftui/view/fixedsize\(horizontal:vertical:\))：Fixes view at its [ideal size](https://lochiwei.gitbook.io/ios/swiftui/view/layout/view-size/ideal-size) <mark style="color:yellow;">in the specified dimensions</mark>.
  * [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:\)) - change proposed size.
      * [.frame(minWidth:idealWidth:maxWidth ...)](https://developer.apple.com/documentation/swiftui/view/frame\(minwidth:idealwidth:maxwidth:minheight:idealheight:maxheight:alignment:\)) - <mark style="color:red;">**define**</mark> ideal size.
      * [fixedSize()](https://developer.apple.com/documentation/swiftui/view/fixedsize\(\)), [fixedSize(horizontal:vertical:)](https://developer.apple.com/documentation/swiftui/view/fixedsize\(horizontal:vertical:\)) - respect <mark style="color:red;">**ideal size**</mark>.
      * [layoutPriority(\_:)](https://developer.apple.com/documentation/swiftui/view/layoutpriority\(_:\))
        {% endtab %}

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

* [ ] 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/) ⭐️ (💈範例)
  {% endtab %}

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

* [stacks](https://lochiwei.gitbook.io/ios/swiftui/view/layout/stacks "mention")
* [Text](https://lochiwei.gitbook.io/ios/swiftui/control/text) ⟩ [no-wrap](https://lochiwei.gitbook.io/ios/swiftui/control/text/format/no-wrap "mention")：用 <mark style="color:blue;">`text.fixedSize()`</mark> 達成<mark style="color:yellow;">不折行</mark>的目的。
  {% endtab %}

{% tab title="🖥️ 影片" %}
{% embed url="<https://youtu.be/cKfDZdG1daE>" %}
{% endtab %}
{% endtabs %}