Open2

SwiftUIのopacityを子のViewにかからないようにしたい時

だじだじ

SwiftUIでViewの透明度を変更したい場合は、 opacity(_:)を利用します。
UIViewのalphaとおおよそ同じ働きですが、子のViewがある時に透明度のかかり方に違いがあります。

UIView + alpha

View + opacity(_:)

SwiftUIの方は、Color.redとTextの両方に透明度かかっているように見えます。
これはSwiftUIの仕様で、付与したopacityが子のそれぞれのViewへと伝播していくためです。(Stackにfont(_:)を付与すると、中にあるText全てにそのフォントが適用される仕組みと同じですね)

だじだじ

こんな時に役に立つのが、compositingGroup()です。

Discussionによると

compositing groupは、不透明度やブレンドモードなど、このビューの祖先ビューの合成効果を、このビューがレンダリングされる前に有効にします。

とのことで、祖先のViewのエフェクトをcompositingGroup()が記述された時点で適用して、子それぞれには適用しないということですね。

先ほどの例に適用すると画像のようになります。

View + opacity(_:) + compositingGroup()

同じ見た目になりましたね👌