# veiw.compositingGroup()

[SwiftUI](../..) ⟩ [view](..) ⟩ [drawing]() ⟩ <mark style="color:purple;">`.compositingGroup()`</mark>

{% hint style="info" %}

{% endhint %}

{% tabs %}
{% tab title="👥 相關" %}
* [shadow](shadow "mention")：如果要幫整個 container view 加陰影，需用到 <mark style="color:purple;">`.compositingGroup()`</mark>。
* 在 [even-odd-fill-mode](../../shapes/shape/fill/even-odd-fill-mode "mention") 使用的例子中，如果沒用 <mark style="color:purple;">`.compositingGroup()`</mark>，連挖空的部分都會有[影子](shadow)。
{% endtab %}

{% tab title="💈 範例" %}
{% hint style="info" %}
所有的 container view (HStack, VStack, ZStack 等) 都有圖層的效應，後來的 view 的圖層都是高於前面的 view，所以如果有影子的話，會疊在前面的 view 身上。但在 container view 身上用 .compositingGroup() 就可以將所有圖層化為「同一圖層」。
{% endhint %}

![(左) 沒用    (右) 有用 .compositingGroup](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M5-JmwCZMKh_d7RfBaN%2F-MKSo_f46Rvr91zlHr-_%2F-MKSoniXOk4MYFi22gsA%2FcompositingGroup.png?alt=media\&token=2e8e981b-1891-4274-ae5e-501fa7f1dffb)

```swift
import SwiftUI

typealias HA = HorizontalAlignment
typealias VA = VerticalAlignment

let w: CGFloat = 100
let h: CGFloat = 50

let r1 = Rectangle().padding(1).frame(w, h).foregroundColor(.pink)
let r2 = Rectangle().padding(1).frame(h, w).foregroundColor(.blue)

struct MyRects: View {
    var body: some View {
        ZStack {
            r1
                .alignmentGuide(HA.center) {  $0[.leading] }
                .alignmentGuide(VA.center) {  $0[.bottom] }
            r1
                .alignmentGuide(HA.center) {  $0[.trailing] }
                .alignmentGuide(VA.center) {  $0[.top] }
            r2
                .alignmentGuide(HA.center) {  $0[.trailing] }
                .alignmentGuide(VA.center) {  $0[.bottom] }
            r2
                .alignmentGuide(HA.center) {  $0[.leading] }
                .alignmentGuide(VA.center) {  $0[.top] }
        }// VStack (container)
        .aspectRatio(1, contentMode: .fit)
    }
}

// live view
struct ContentView: View {
    var body: some View {
        HStack {
            MyRects()                // ⭐️ 不同圖層，影子會有層次感
            MyRects()
                .compositingGroup()  // ⭐️ 變為同一圖層
        }// HStack
            .padding()
            .shadow(color: .black, radius: 4, x: 4, y: 4)
            .background(Color.gray)
    }
}
```
{% endtab %}

{% tab title="📘 手冊" %}
* [SwiftUI](https://developer.apple.com/documentation/swiftui) ⟩ [View](https://developer.apple.com/documentation/swiftui/view) ⟩ [.compositingGroup()](https://developer.apple.com/documentation/swiftui/view/compositinggroup\(\))
{% endtab %}

{% tab title="📗 參考" %}
* [ ] ChaoCode ⟩ [在 SwiftUI 中替 View 加上陰影](https://chaocode.co/blog/shadow-in-swiftui)&#x20;
{% endtab %}

{% tab title="🗣 討論" %}
* [**Let the Shapes be on the same layer**](https://stackoverflow.com/questions/64515680/let-the-shapes-be-on-the-same-layer) - SO
{% endtab %}
{% endtabs %}
