SwiftUIでカードを作ってみる

これは何か?

SwiftUIでカードのUIを作ってみたいと思った。しかし参考になりそうな情報がなかった😅
なぜか複雑な機能を作るチュートリアルしかない？？？

とあるブログを参考に作ってみた。

まずは画像を用意する。

VStackの中に、背景が白のVStackを配置して、その中に余白をHStackで横並びのImageとテキストを配置する。その下にもHStackで囲んだテキストを配置する。カード自体は、shadowを使って影をつけて立体的にしている。

import SwiftUI


struct ContentView: View {
    
    var body: some View {
        VStack {
            Spacer()
            VStack {
                HStack {
                    Image("orechan")
                        .resizable()
                        .scaledToFit()
                        .clipShape(Circle())
                        .frame(width: 120, height: 120)
                    Text("俺ちゃん")
                        .font(.system(size: 22))
                    Spacer()
                }
                HStack {
                    Text("どうも主人公の俺ちゃんです笑\n趣味はボードゲーム、スプラトゥーン、料理です。")
                    Spacer()
                }
            }
            .padding()
            .background(.white)
            .cornerRadius(8)
            .clipped()
            .shadow(color: .gray.opacity(0.7), radius: 5)
            Spacer()
        }
        .padding()
        .background(Color(white: 0.9))
    }
}

#Preview {
    ContentView()
}

[こんな感じのUIができました笑]

最後に

SwiftUIを学習しているのですが知識不足でイメージしたUIがまだ作れません。UIのレイアウトを覚える方法は作る回数を増やすことですね。SNSをトレースしてみると良いかもしれない？