> 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/custom/view/shapestyleview.md).

# ShapeStyleView

[swift](/ios/swift.md)⟩ [custom](/ios/custom.md) ⟩ [view](/ios/custom/view.md) ⟩ Swatch

{% hint style="info" %}
將 [<mark style="color:blue;">`ShapeStyle`</mark>](/ios/swiftui/shapes/shapestyle.md) 當成一個 [<mark style="color:blue;">`View`</mark>](/ios/swiftui/view/view.md)。

:point\_right: 前情提要請參閱： [can't change builtin hierarchy](/ios/swift/type/category/protocol/inherit/cant-inherit.md)。
{% endhint %}

<figure><img src="/files/PYcK68IQKMXzpxWSoDk9" alt=""><figcaption><p><mark style="color:purple;"><code>ShapeStyleView</code></mark>, <mark style="color:blue;"><code>AnyGradient</code></mark> as <mark style="color:blue;"><code>View</code></mark></p></figcaption></figure>

{% tabs %}
{% tab title="💾 程式" %}

```swift
import SwiftUI

// ┌────────────────┐
// │ ShapeStyleView │
// └────────────────┘
// wrap a shape style in a view
struct ShapeStyleView<S: ShapeStyle>: View {
    
    let style: S
    
    init(_ shapeStyle: S) {
        self.style = shapeStyle
    }
    
    // `View` protocol requirement
    var body: some View {
        Rectangle().fill(style)
    }
}

// ┌─────────────────┐
// │ Gradient + View │
// └─────────────────┘
// now `Gradient` is a view.
extension Gradient: View {
    public var body: some View {
        Rectangle().fill(self)
    }
}

// ┌────────────────────┐
// │ AnyGradient + View │
// └────────────────────┘
// now `AnyGradient` is a view.
extension AnyGradient: View {
    public var body: some View {
        Rectangle().fill(self)
    }
}
```

{% endtab %}

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

* [ShapeStyle](/ios/swiftui/shapes/shapestyle.md)
* [Gradient](/ios/swiftui/shapes/shapestyle/gradient.md)
  {% endtab %}
  {% endtabs %}