【SwiftUI】Viewの不透明を変更する（opacity）

Viewの不透明度を変更するopacityモディファイアについて解説します。

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】11.5
【Swift】5.2.4
【iOS】13.5
【macOS】Catalina バージョン 10.15.4

opacity(Double)

引数に不透明度を0.0（完全に透明）〜1.0（完全に不透明）の範囲で設定します。
例えば30%の不透明度にする場合は0.3を指定します。
不透明度の適用によって、Viewの背後にある別のViewを見えるようにしたり、Viewの強調を解除したりする効果があります。

スライダーを使って前面のイメージViewの不透明度を下げていくと、だんだん背面の文字が見えるようになるサンプルです。

struct ContentView: View {

@State private var opacity = 1.0

var body: some View {

ZStack {

Text("カピ通信")

.font(.system(size: 100, weight: .black, design: .default))

Image("capibara")

.resizable()

.scaledToFit()

.frame(width: 400)

.opacity(opacity) // 不透明度の設定

VStack {

Spacer()

HStack {

Slider(value: $opacity, in: 0...1.0)

Text("\(opacity, specifier: "%.2f")")

}