# view modifier

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

{% hint style="success" %}
A <mark style="color:purple;">view modifier</mark> is used to <mark style="color:yellow;">customize</mark> the <mark style="color:yellow;">appearance</mark>╱<mark style="color:yellow;">behavior</mark> of a [view](https://lochiwei.gitbook.io/ios/swiftui/view). Since <mark style="color:purple;">modifiers</mark> are <mark style="color:yellow;">applied in order</mark>, swapping their positions can <mark style="color:yellow;">change</mark> the <mark style="color:yellow;">appearance</mark>╱<mark style="color:yellow;">behavior</mark> of the resulting view.
{% endhint %}

```swift
Rectangle()
    // ⭐️ view modifiers
    .foregroundColor(.blue)    // change appearance (foreground color)
    .border(.green)            // change appearance (border color)
```

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

* [layout](https://lochiwei.gitbook.io/ios/swiftui/view/modifier/layout "mention")
* [rendering](https://lochiwei.gitbook.io/ios/swiftui/view/modifier/rendering "mention")
* view modifier [examples](https://lochiwei.gitbook.io/ios/swiftui/view/modifier/examples)
* [ViewModifier](https://lochiwei.gitbook.io/ios/swiftui/view/modifier/viewmodifier) (protocol)
* [add modifiers to Xcode](https://lochiwei.gitbook.io/ios/swiftui/view/modifier/add-to-xcode)
* [animate state changes](https://lochiwei.gitbook.io/ios/swiftui/view/state/animate)
  {% endtab %}

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

* [SwiftUI](https://developer.apple.com/documentation/swiftui) ⟩  [View fundamentals](https://developer.apple.com/documentation/swiftui/view-fundamentals) ⟩ [View](https://developer.apple.com/documentation/swiftui/view) ⟩  [Layout modifiers](https://developer.apple.com/documentation/swiftui/view-layout)
  {% endtab %}

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

* 彼得潘 ⟩ [Keep Going with Apps](https://medium.com/%E5%BD%BC%E5%BE%97%E6%BD%98%E7%9A%84-swift-ios-app-%E9%96%8B%E7%99%BC%E5%95%8F%E9%A1%8C%E8%A7%A3%E7%AD%94%E9%9B%86/keep-going-with-apps-build-your-first-app-341ba773b997)&#x20;
  {% endtab %}
  {% endtabs %}