はじめに

SwiftUIを使っていてこれどうやるんだ？と思った事があったので記事にします。

現在のコード

struct ContentView: View {
    var body: some View {
        Text("影のテストです")
            .frame(width: 200, height: 80)
            .background(Color.yellow)
            .shadow(color: .black, radius: 3, x: -5, y: -5)
    }
}

問題

背景の黄色だけに影を付けたいのにTextにも影が付く

解決方法

shadowの前にcompositingGroupを付ける

struct ContentView: View {
    var body: some View {
        Text("影のテストです")
            .frame(width: 200, height: 80)
            .background(Color.yellow)
+           .compositingGroup()
            .shadow(color: .black, radius: 3, x: -5, y: -5)
    }
}

おまけ(なんで？)

cornerRadiusでも同じ事ができます。

struct ContentView: View {
    var body: some View {
        Text("影のテストです")
            .frame(width: 200, height: 80)
            .background(Color.yellow)
+           .cornerRadius(0)
            .shadow(color: .black, radius: 3, x: -5, y: -5)
    }
}

おわり

影は貫通するんですね