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

# 完成イメージ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648522/5bfe9715-c485-5336-efb9-2ecdec9a29cc.png)


# 板を作る
- 適当なTextが入ってるVStackを作る
- 磨りガラスみたいに透けてるモーダルを作りたいので、
わかりやすいようにカラフルな背景もつけておく。
```swift
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"))
    }
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648522/922b1592-e259-a893-3006-fd0f848aad6c.png)

---

- 適当に大きさ指定
- backgroundに`ultraThinMaterial`を指定
これの種類を変えると透け具合が変わる
- ちょっと角丸にする
```swift
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"))
    }
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648522/2dccddd7-cf2c-f73c-7d5f-c39c63a80ebd.png)

# ハイライトを作る

光が当たって光ってる部分を作っていく
磨りガラスのフチに線を描画する
```swift
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"))
    }
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648522/df570291-c1d2-42b6-e183-8292a317c554.png)

線の色を変えたい時は`foregroundColor`を指定する
```swift
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"))
    }
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648522/050a30a6-2e98-9a2f-5bd3-5a2fc8150934.png)

上から光が当たってる感じにしたいので、
線の色を、上から段々と白→透明になっていくグラデーションにしたい
`foregroundColor`ではグラデーションを指定できないので、`foregroundStyle`に変更して、その中にグラデーションを入れる。
```swift
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"))
    }
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648522/a913e1c6-0811-4ff5-fe17-15c6efc3832c.png)

# 影を作る

```swift
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"))
    }
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648522/7a661d8a-3ebc-ed4a-2d2f-9a8e75223e2e.png)


濃すぎるのでちょっと薄める
```swift
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"))
    }
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648522/42f0fd63-cc96-2cd8-7eea-d4bfd104dd2d.png)

上から光が当たってると、下に影が伸びるはずなので、影を下にオフセット
```swift
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"))
    }
}
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648522/8665241b-b841-121b-9e10-e4a7944ce0bd.png)

**完成！！**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2648522/5bfe9715-c485-5336-efb9-2ecdec9a29cc.png)