CodeWithChris - 14 Day Beginner Challengeの記憶(L5)

Lesson 5: War Card Game UI Construction

• 用意されたAssetデータを使って、SwiftUIで画面とテキストを配置

// 背景レイヤーと上部UIレイヤーを重ねる
ZStack{
    // 背景画像を配置
    Image("background")
        .resizable()
        .aspectRatio(contentMode: .fill)
        .ignoresSafeArea()

    //上部UIレイヤーを配置
    VStack{
        Spacer()
        // Warロゴを配置
        Image("logo")
        Spacer()
        // カード画像を左右に並べる
        HStack{
            Spacer()
            Image("card2")
            Spacer()
            Image("card3")
            Spacer()
        }
        Spacer()
        // Dealボタンを配置
        Image("dealbutton")
        Spacer()
        
        // Scoreを左右に並べる
        HStack{
            Spacer()
            // Playerスコア
            VStack{
                Text("Player")
                    .font(.headline)
                Text("0")
                    .font(.largeTitle)
            }
            Spacer()
            // CPUスコア
            VStack{
                Text("CPU")
                    .font(.headline)
                Text("0")
                    .font(.largeTitle)
            }
            Spacer()
        }
        .foregroundColor(.white)
        Spacer()
    }
}