【SwiftUI】Glassmorphismイケすぎでしょ！！

はじめに

めっちゃかっこいいGlassmorphismをSwiftUIで再現できたので記録しておきます。
再利用できるようにButtonStyleにしてみます。

背景の画像はこちらから使用しました

サンプルアプリ

実装

View

import SwiftUI

struct ContentView: View {
    var body: some View {
        ZStack {
            Image("background")
                .resizable()
                .scaledToFill()
                .edgesIgnoringSafeArea(.all)

            Button {
                print()
            } label: {
                Text("").frame(width: 320, height: 200)
            }
            .buttonStyle(.glassmorphism)
        }
    }
}

ButtonStyle

struct GlassmorphismButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .foregroundColor(.white)
            .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 10))
            .overlay(.white.opacity(0.5), in: RoundedRectangle(cornerRadius: 10).stroke(style: .init()))
    }
}

extension ButtonStyle where Self == GlassmorphismButtonStyle {
    static var glassmorphism: GlassmorphismButtonStyle {
        .init()
    }
}

おわり

これめっちゃかっこいいです