SwiftUIでいこう！- スタンフォード大学Lecture 4: Game Logic

続いて先に作ってあるContentView等にMVVMで作ったクラスを使って修正していきます。

まず、起動するファイルを決めている以下の構造体を作っていきます。

import SwiftUI

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

実装です。

ViewModelの部分を読み込み、

let game = EmojiGame()

そして

ContentView(viewModel: game)

全体です。

@main
struct SampleAppApp: App {
   
   let game = EmojiGame()
   
   var body: some Scene {
       WindowGroup {
           ContentView(viewModel: game)
       }
   }
}

次にContentView()を置き換えていきます。

let viewModel:EmojiGame

と宣言して"ViewwModel(EmojiGame)"で該当カ所を置き換えていきます。

まず、"var body: some View {}"

ForEach(viewModel.cards){card in
　　CardView(card: card).aspectRatio(2/3,contentMode:.fit)
}

Model "struct Game<CardContent>{}"を変更していきます。

 init(numberOfpairOfCards:Int,createCardContent:(Int)->CardContent){
       cards = Array<Card>()
       for pairIndex in 0..<numberOfpairOfCards{
           let content = createCardContent(pairIndex)
           cards.append(Card(id:pairIndex*2, content: content))
           cards.append(Card(id:pairIndex*2+1, content: content))
       }
   }
   
   
   struct Card:Identifiable{
       var id: Int
       var isFaceUp:Bool=false
       var isMatched:Bool=false
       var content:CardContent
   }

init(numberOfpairOfCards:Int,createCardContent:(Int)->CardContent){}の以下の部分。

cards.append(Card(id:pairIndex*2, content: content))
cards.append(Card(id:pairIndex*2+1, content: content))

struct Card{}の以下

struct Card:Identifiable{
　　　var id: Int
　　　・・・・
　　　・・・・
　　　・・・・
}

以上を前提に

"struct CardView:View"をModelとして作った"Game<CardContent>"で

let card:Game<String>.Card

と宣言して置き換えていきます。

struct CardView:View {

   let card:Game<String>.Card
   
   var body: some View{
       ZStack{
           let shape =  RoundedRectangle(cornerRadius: 20.0)
           if card.isFaceUp{
               shape
                   .fill()
                   .foregroundColor(.white)
               
               shape
                   .stroke(lineWidth: 3)
               Text(card.content)
                   .font(.largeTitle)
           }else{
               shape
                   .fill()
           }
       }

   }
}

上記"CardView:View"の以下の部分、

if card.isFaceUp{}

Text(card.content)

Xcodeのプレビューに必要な

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
       let game = EmojiGame()
       ContentView(viewModel:game)
   }
}

let game = EmojiGame()
ContentView(viewModel:game)

太字の部分を変更しています。