上から光が当たってるいい感じの半透明モーダル

完成イメージ

板を作る

• 適当なTextが入ってるVStackを作る
• 磨りガラスみたいに透けてるモーダルを作りたいので、
  わかりやすいようにカラフルな背景もつけておく。

import SwiftUI

struct Modal: View {
    var body: some View {
        VStack {
            Text("Modal")
        }
    }
}

struct Modal_Previews: PreviewProvider {
    static var previews: some View {
        ModalView()
            .background(Image("Wallpaper 2"))
    }
}

---

• 適当に大きさ指定
• backgroundにultraThinMaterialを指定
  これの種類を変えると透け具合が変わる
• ちょっと角丸にする

import SwiftUI

struct Modal: View {
    var body: some View {
        VStack {
            Text("Modal")
        }
        .frame(maxWidth: 300, maxHeight: 300)
        .background(.ultraThinMaterial)
        .cornerRadius(10)
    }
}

struct Modal_Previews: PreviewProvider {
    static var previews: some View {
        Modal()
            .background(Image("Wallpaper 2"))
    }
}

ハイライトを作る

光が当たって光ってる部分を作っていく
磨りガラスのフチに線を描画する

import SwiftUI

struct Modal: View {
    var body: some View {
        VStack {
            Text("Modal")
        }
        .frame(maxWidth: 300, maxHeight: 300)
        .background(.ultraThinMaterial)
        .cornerRadius(10)
        .overlay(
            RoundedRectangle(cornerRadius: 10)
                .stroke()
        )
    }
}

struct Modal_Previews: PreviewProvider {
    static var previews: some View {
        Modal()
            .background(Image("Wallpaper 2"))
    }
}

線の色を変えたい時はforegroundColorを指定する

import SwiftUI

struct Modal: View {
    var body: some View {
        VStack {
            Text("Modal")
        }
        .frame(maxWidth: 300, maxHeight: 300)
        .background(.ultraThinMaterial)
        .cornerRadius(10)
        .overlay(
            RoundedRectangle(cornerRadius: 10)
                .stroke()
                .foregroundColor(.white)
        )
    }
}

struct Modal_Previews: PreviewProvider {
    static var previews: some View {
        Modal()
            .background(Image("Wallpaper 2"))
    }
}

上から光が当たってる感じにしたいので、
線の色を、上から段々と白→透明になっていくグラデーションにしたい
foregroundColorではグラデーションを指定できないので、foregroundStyleに変更して、その中にグラデーションを入れる。

import SwiftUI

struct Modal: View {
    var body: some View {
        VStack {
            Text("Modal")
        }
        .frame(maxWidth: 300, maxHeight: 300)
        .background(.ultraThinMaterial)
        .cornerRadius(10)
        .overlay(
            RoundedRectangle(cornerRadius: 10)
                .stroke()
                .foregroundStyle(
                    .linearGradient(
                        colors: [.white.opacity(0.5), .clear],
                        startPoint: .top,
                        endPoint: .bottom
                    )
                )
        )
    }
}

struct Modal_Previews: PreviewProvider {
    static var previews: some View {
        Modal()
            .background(Image("Wallpaper 2"))
    }
}

影を作る

import SwiftUI

struct Modal: View {
    var body: some View {
        VStack {
            Text("Modal")
        }
        .frame(maxWidth: 300, maxHeight: 300)
        .background(.ultraThinMaterial)
        .cornerRadius(10)
        .overlay(
            RoundedRectangle(cornerRadius: 10)
                .stroke()
                .foregroundStyle(
                    .linearGradient(
                        colors: [.white.opacity(0.5), .clear],
                        startPoint: .top,
                        endPoint: .bottom
                    )
                )
        )
        .shadow(color: .black, radius: 20)
    }
}

struct Modal_Previews: PreviewProvider {
    static var previews: some View {
        Modal()
            .background(Image("Wallpaper 2"))
    }
}

濃すぎるのでちょっと薄める

import SwiftUI

struct Modal: View {
    var body: some View {
        VStack {
            Text("Modal")
        }
        .frame(maxWidth: 300, maxHeight: 300)
        .background(.ultraThinMaterial)
        .cornerRadius(10)
        .overlay(
            RoundedRectangle(cornerRadius: 10)
                .stroke()
                .foregroundStyle(
                    .linearGradient(
                        colors: [.white.opacity(0.5), .clear],
                        startPoint: .top,
                        endPoint: .bottom
                    )
                )
        )
        .shadow(color: .black.opacity(0.3), radius: 20)
    }
}

struct Modal_Previews: PreviewProvider {
    static var previews: some View {
        Modal()
            .background(Image("Wallpaper 2"))
    }
}

上から光が当たってると、下に影が伸びるはずなので、影を下にオフセット

import SwiftUI

struct Modal: View {
    var body: some View {
        VStack {
            Text("Modal")
        }
        .frame(maxWidth: 300, maxHeight: 300)
        .background(.ultraThinMaterial)
        .cornerRadius(10)
        .overlay(
            RoundedRectangle(cornerRadius: 10)
                .stroke()
                .foregroundStyle(
                    .linearGradient(
                        colors: [.white.opacity(0.5), .clear],
                        startPoint: .top,
                        endPoint: .bottom
                    )
                )
        )
        .shadow(color: .black.opacity(0.3), radius: 20, y: 30)
    }
}

struct Modal_Previews: PreviewProvider {
    static var previews: some View {
        Modal()
            .background(Image("Wallpaper 2"))
    }
}

完成！！