【SwiftUI】ビューを透過させるopacityモディファイア

SwiftUIのビューを透過させるには、不透明度を設定するopacityモディファイアを利用する。

今回はサンプルとして、Imageビューの不透明度をSliderで調整するコードを紹介する。

struct ContentView: View {
    @State var opacity = 1.0
    
    var body: some View {
        VStack {
            Image("pasta")
                .resizable()
                .scaledToFit()
                .opacity(opacity)
            VStack(alignment: .leading) {
                Text("不透明度: \(opacity)")
                Slider(value: $opacity,
                   in: 0...1)
            }
        }
    }
}

画像は何を使っても良いが、今回はパスタの画像を用意した。

そのまま使うと画像サイズの問題で、画面からはみ出てしまうため、resizableで画像サイズを調整。さらに縦横比が崩れないように、scaledToFitも合わせて使っている。

Sliderにはopacity状態変数をバインドさせておき、スライダーの動きに合わせてリアルタイムでビューに値が反映されるようにしている。

このサンプルアプリを実行してみる。

スライダーの動きに合わせて、画像の透明度が変化していることが分かる。