> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/ios/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/ios/swiftui/view/modifier.md).

# view modifier

[SwiftUI](/ios/swiftui.md) ⟩ [view](/ios/swiftui/view.md) ⟩ 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](/ios/swiftui/view.md). 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 modifier](/ios/swiftui/view/modifier/layout.md)
* [rendering modifier](/ios/swiftui/view/modifier/rendering.md)
* view modifier [examples](/ios/swiftui/view/modifier/examples.md)
* [ViewModifier](/ios/swiftui/view/modifier/viewmodifier.md) (protocol)
* [add modifiers to Xcode](/ios/swiftui/view/modifier/add-to-xcode.md)
* [animate state changes](/ios/swiftui/view/state/animate.md)
  {% 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/彼得潘的-swift-ios-app-開發問題解答集/keep-going-with-apps-build-your-first-app-341ba773b997)&#x20;
  {% endtab %}
  {% endtabs %}