写真を表示する場合にキャプション、表題をつけるときに重ねる方法が示されています。

写真の上にテキストを重ねて表示します。MacのPlaygrounds(ipadのSwiftPlaygroundsのMac版)で実行します。XcodeのPlaygroundとは違うのでちょっとコードも変わります。(プレビュー表示するのにPreviewProviderを使わないのでXcode本体と同じコードで表示します)

My app

まず起動時読み込まれるページです。これにContentView()を適応して表示させるようにします。

import SwiftUI

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {                      
                ContentView()                
        }
    }
}

メインの構造体ContentView()の指定がありますが、実際のコードは別ファイルCaptionedPhotoで規定します。

CaptionedPhoto

実際に表示する部分のコードです。

import SwiftUI


struct CaptionedPhoto: View {
    
    let assetName: String
    let captionText: String
    
    var body: some View {   
        Image(assetName)      
            .resizable()  
            .scaledToFit()   
            .overlay(alignment: .bottom) {
                Caption(text: captionText)  
            }
            .clipShape(RoundedRectangle(cornerRadius: 10.0, style: .continuous))
            .padding() 
    }  
}

Image()で画像を表示して、.resizable()などのモディファイアで修飾します。

.overlayで文字を画像の上に表示します。詳細についてはCaption()で表示の方法をさらに定義しています。

struct Caption: View {
    let text: String
    var body: some View { 
        Text(text)
            .padding()
            .background(Color.blue)
            .opacity(0.8)
            .cornerRadius(20)
            .padding() 
    }   
}

作った構造体を利用して変数にデータ入れ込んで文字などを指定してして

という感じに引数を入れます。以下のコードになります。

ContentView

import SwiftUI

struct ContentView:View{
    let landscapeName = "train" 
    let landscapeCaption = "This photo is wider than it is tall."
    let portraitName = "train" 
    let portraitCaption = "This photo is taller than it is wide."
    
    var body: some View {        
       
       CaptionedPhoto(assetName: portraitName,captionText:portraitCaption)
      
    }
}