☰

現在のビューの背後にあるビューの半透明（VisualEffectViewのようにぼやけている） 質問する

tag-icon • tag-icon swiftui
現在のビューの背後にあるビューの半透明（VisualEffectViewのようにぼやけている） 質問する

SwiftUI では、TabView のタブ バーの背後のビューが、タブ バーの裏側がすりガラスであるかのように透けて見えます。Apple は、自社のアプリのいたるところでこの外観を使用しています。しかし、これを SwiftUI のビューに追加するにはどうすればよいでしょうか?

以下は、Podcasts アプリの例です。タブ バーにはすりガラス効果があります。タブ バーの上にあるオーバーレイ ミニ プレーヤーも同様です。TabView 内のタブ バーはデフォルトでこの外観になりますが、関連付けられているオーバーレイ (この場合はミニ プレーヤー) はそうではありません。

ここに画像の説明を入力してください

ベストアンサー1

Apple流

ビュー階層を調査すると、Apple がUIKitと を使用していることがわかります。これは、わずか 5 行のコードでUIVisualEffectView定義できます。VisualEffectView

struct VisualEffectView: UIViewRepresentable {
    var effect: UIVisualEffect?
    func makeUIView(context: UIViewRepresentableContext<Self>) -> UIVisualEffectView { UIVisualEffectView() }
    func updateUIView(_ uiView: UIVisualEffectView, context: UIViewRepresentableContext<Self>) { uiView.effect = effect }
}

使用例:

struct ContentView: View {

    var body: some View {
        ZStack {
            Image("BG")
                .resizable()
                .scaledToFill()
                .edgesIgnoringSafeArea(.all)
            
            VisualEffectView(effect: UIBlurEffect(style: .dark))
                .edgesIgnoringSafeArea(.all)
                
            Text("Hello \nVisual Effect View")
                .font(.largeTitle)
                .fontWeight(.black)
                .foregroundColor(.white)
        }
    }
}

視覚効果ビュー

ネイティブ SwiftUI の方法:

.blur()ぼかす必要があるものに、次のように修飾子を追加できます。

struct ContentView: View {

    var body: some View {
        ZStack {
            Image("BG")
                .resizable()
                .scaledToFill()
                .edgesIgnoringSafeArea(.all)
                .blur(radius: 20) // <- this is the important modifier. The rest is just for demo
                
            Text("Hello \nSwiftUI Blur Effect")
                .font(.largeTitle)
                .fontWeight(.black)
                .foregroundColor(.white)
        }
    }
}

SwiftUI コード ビューの上部と下部に注意してください

ご了承くださいGroup複数のビューを作成して、それらをぼかすことができます。

iOS 15 - アップルマテリアル

1 行のコードで iOS の定義済みマテリアルを使用できます:

.background(.ultraThinMaterial)

デモ

おすすめ記事