2020最新斯坦福大学ios-swift教程-第三课（下）- 协议与layout

笔者之前观看的是2017版斯坦福swift教程，今天来更新2020版最新的教程
第三课（下）——讲述swiftUI的协议与layout view的使用，并且完成了家庭作业中的大小设定，使用 .aspectRatio(contentMode: .fit)
下面上代码，代码中有注释，当然也可以留言交流

//
//  ContentView.swift
//  Memorize
//
//  Created by 王@@ on 2021/2/6.
//
//MVVM中的view
import SwiftUI

struct EmojiMemoryGameView: View {
    //这里定义viewModel去访问viewModel
    //视图在published发布后，即接收广播后，进行更新
    @ObservedObject var viewModel: EmojiMemoryGame
    
    var body: some View {
        VStack{
         HStack {
            ForEach(viewModel.cards) { card in
                //此处可以对卡牌的选择意图进行反馈
                CardView(card: card).onTapGesture{
                    self.viewModel.choose(card: card)
                }
            }
         }
        }
            .foregroundColor(.orange)
            .padding()
            //加阴影
            .shadow(radius: 5)
            //家庭作业用到aspectRatio，可以自行选择大小，并具有长宽比
            .aspectRatio(contentMode: .fit)
            //.edgesIgnoringSafeArea([.top])
    }
}

struct CardView: View {
    var card: MemoryGame<String>.Card
    
    var body: some View {
        //使用GeometryReader视图构建
        GeometryReader { geometry in
            self.body(for: geometry.size)

        }
        
    }
    func body(for size: CGSize) -> some View{
        ZStack()  {
            if card.isFaceUp{
            RoundedRectangle(cornerRadius: cornerRadius).fill(Color.white)
            RoundedRectangle(cornerRadius: cornerRadius).stroke(lineWidth: edgeLineWidth)
            Text(card.concent)
            }else{
            RoundedRectangle(cornerRadius: cornerRadius).fill()
            }
        }
        //通过font设置字体
        .font(Font.system(size: fontSize(for: size)))
    }
    //MARK: - Drawing Contants
    
    let cornerRadius: CGFloat = 10.0
    let edgeLineWidth: CGFloat = 3
    let fontScaleFactor: CGFloat = 0.75

    func fontSize(for size: CGSize) -> CGFloat{
        min(size.width, size.height) * fontScaleFactor
    }
    
}






struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        EmojiMemoryGameView(viewModel: EmojiMemoryGame())
    }
}
 

//
//  EmojiMemoryGame.swift
//  Memorize
//
 //
//MVVM中的view model,实现用户的意图,向view展示model

import SwiftUI

//func creatCardContent(pairIndex: Int) -> String{
//    return "😀"
//}
//(pairIndex: Int) -> String  in "😀" 等价于 pairIndex  in "😀"
//设置ObservableObject约束
class EmojiMemoryGame: ObservableObject{
    //model是一个称呼，model确定model- MemoryGame的使用类型,可以通过定义一个自己的cards 去返回已经被private保护的model的cards
    //这里给model一个卡牌对的传参,并且接收model的调用去返回一个卡牌内容cardcontent
    //numberOfPairsOfCards: 2, cardConteneFactory: { pairIndex  in "😀"}) 等价于 (numberOfPairsOfCards: 2){ pairIndex  in "😀"}
    //@Published是属性包装器,模型每次每次变化都进行广播
    @Published private var model: MemoryGame<String> = EmojiMemoryGame.createMemoryGame()
    
    static func createMemoryGame() -> MemoryGame<String>{
        
        let emojis = ["👻","🎃","🕷"]
        return MemoryGame<String>(numberOfPairsOfCards: emojis.count){ pairIndex  in
            return emojis[pairIndex]
        }
    }
    
    //MARK: - Access to the model(对model的一些访问)
    
    var cards: Array<MemoryGame<String>.Card>{
        model.cards
    }
    
    //MARK: - Intent(s)一些意图
    
    func choose(card: MemoryGame<String>.Card){
        //请model来选择卡牌
//        //objectWillChange分发
//        objectWillChange.send()
        model.choose(card: card)
    }
    
}

//
//  MemoryGame.swift
//  Memorize
//
//  Created by 王@@ on 2021/2/13.
//
//MVVM中的model

import Foundation

struct MemoryGame<CardConcent> {
    var cards: Array<Card>
    
    //mutating代表变异函数，可以修改自身的函数
    mutating func choose(card: Card){
        print("card chosen: \(card)")
        //实现翻转逻辑,这里确定选中的卡牌是阵列中的第几个卡牌,得到一个int类型的返回值并复制给chosenIndex
        let chosenIndex = self.index(of: card)
//        //这里chosenCard即是选中的卡牌
//        let chosenCard :Card = self.cards[chosenIndex]
//        //这里反转卡牌，让选中卡牌的isFaceUp等于反值，因为isFaceUp是一个bool型数值
//        chosenCard.isFaceUp = !chosenCard.isFaceUp
        //与上面等价
        self.cards[chosenIndex].isFaceUp = !self.cards[chosenIndex].isFaceUp
    }
    
    //外部名称of、内部名称card、类型Card
    func index(of card: Card) -> Int{
        for index in 0..<self.cards.count{
            if self.cards[index].id == card.id{
                return index
            }
        }
        return 0 //TODO: gogus!
    }
    //接收到卡牌对的传参之后进行一个初始化,并且将回调一个方法型的参数，这个方法型的参数传一个int类型的数字，告诉viewmodel，是哪组卡牌对需要进行初始化，这时viewmodel只需要返回一个CardConcent给model进行初始化即可
    init(numberOfPairsOfCards: Int, cardConteneFactory: (Int) -> CardConcent) {
        //创建一个空的纸牌阵列
        cards = Array<Card>()
        //遍历卡牌对，创建卡牌队列
        for pairIndex in  0..<numberOfPairsOfCards{
            let content = cardConteneFactory(pairIndex)
            cards.append(Card( concent: content, id: pairIndex*2))
            cards.append(Card( concent: content, id: pairIndex*2+1))
 
        }
        
    }
    //Identifiable是可迭代事物协议，添加这个协议swift才可以识别卡牌并且迭代 
    struct Card: Identifiable {
        //三个变量，是否正面朝上、是否被匹配、内容(这里使用MemoryGame的通用类型CardConcent,因为与ui分离，这里可以放入任何想放入的东西)
        var isFaceUp: Bool = true
        var isMatched: Bool = false
        var concent: CardConcent
        var id: Int

    }
}