[SwiftUI]overlay修飾子でImage(画像)にText(テキスト)を重ねるには？

どうも、ちょげ(@chogetarou)です。

overlay修飾子を使って、Imageの画像にText(テキスト)を重ねる方法を紹介します。

方法

overlay修飾子で、ImageにTextを重ねるには、まず、Imageにoverlay修飾子を付与します。

そして、overlay修飾子の引数にTextを指定します。

Image("アセット名")
    .overlay(
        Text("テキスト")
    )

引数にTextを指定したoverlay修飾子を、Imageに付与することで、ImageにTextを重ねることができます。

使用例

struct ContentView: View {
    var body: some View {
        VStack {
            Image("coffee")
                .overlay(
                    Text("Good, Morning")
                        .foregroundColor(.white)
                        .font(.system(size: 24))
                        .frame(width: 300, height: 200)
                        .background(Color.blue)
                )
        }
    }
}