008_swiftui_优化*应用

上节课 我们学会了如何提取布局。。为了加深印象。。我们继续提取012代码章节中的代码进行合理的优化。

实际编程中。这样的优化。会让你的代码更加简洁。

我们把图片的Image 提取到新建的CardView.swift Ui上 代码如下

 

//
//  CardView.swift
//  Slots Demo
//
//  Created by liuan on 2020/3/31.
//  Copyright © 2020 liuan. All rights reserved.
//

import SwiftUI

struct CardView: View {
    @Binding var symbol:String
    @Binding var background:Color
    
    var body: some View {
        Image(symbol)
            .resizable()
            .aspectRatio(1, contentMode: .fit)
            .background(background.opacity(0.5))
            .cornerRadius(20)
    }
}

struct CardView_Previews: PreviewProvider {
    static var previews: some View {
        CardView(symbol: Binding.constant("cherry"),
                 background: Binding.constant(Color.green))
    }
}

下面。就是contentView.swift 的修改

    //
    //  ContentView.swift
    //  Slots Demo
    //
    //  Created by liuan on 2020/3/31.
    //  Copyright © 2020 liuan. All rights reserved.
    //
    
    import SwiftUI
    
    struct ContentView: View {
        @State private var symbols=["apple","star","cherry"]
        @State private var numbers=[0,1,2]
        @State private var credits = 1000
        @State private var backgrounds=[Color.white,Color.white,Color.white]
        
        private var betAmout=5;
        var body: some View {
            ZStack{
                //bsckhtound
                Rectangle()
                    .foregroundColor(Color(red: 200/255, green: 143/255, blue: 32/255))
                    .edgesIgnoringSafeArea(.all)
                Rectangle()
                    .foregroundColor(Color(red: 228/255, green: 195/255, blue: 76/255))
                    .rotationEffect(Angle(degrees: 45))
                    .edgesIgnoringSafeArea(.all)
                Spacer()
                
                VStack{
                    Spacer()
                    //title
                    HStack{
                        Image(systemName: "star.fill")
                            .foregroundColor(.yellow)
                        
                        Text("SwiftUi Slots")
                            .bold()
                            .foregroundColor(.white)
                        
                        Image(systemName: "star.fill")
                            .foregroundColor(.yellow)
                        
                    }.scaleEffect(2)
                    Spacer()
                    //Credits counter
                    Text("Credits:"+String(credits))
                        .foregroundColor(.black)
                        .background(Color.white.opacity(0.5))
                        .padding(.all,10)
                        .cornerRadius(20)
                    Spacer()
                    //cards
                    HStack{
                        Spacer()
                        CardView(symbol: $symbols[numbers[0]],background: $backgrounds[0])
                        CardView(symbol: $symbols[numbers[1]],background: $backgrounds[1])
                        CardView(symbol: $symbols[numbers[2]],background: $backgrounds[2])
                        Spacer()
                    }
                    Spacer()
                    
                    Button(action: {
                        //set Background back to white
//                        self.backgrounds[0]=Color.white
//                        self.backgrounds[1]=Color.white
//                        self.backgrounds[2]=Color.white
                        //也可以使用闭包遍历的方式
                        self.backgrounds=self.backgrounds.map{
                            _ in Color.white
                        }
                        
                        
//                        self.numbers[0]=Int.random(in: 0...self.symbols.count-1)
//                        self.numbers[1]=Int.random(in: 0...self.symbols.count-1)
//                        self.numbers[2]=Int.random(in: 0...self.symbols.count-1)
                        //闭包优化
                        self.numbers=self.numbers.map({_ in
                            Int.random(in: 0...self.symbols.count-1)
                        })
                        //check winning
                        if self.numbers[0]==self.numbers[1]&&self.numbers[1]==self.numbers[2]{
                            self.credits+=self.betAmout*10
                            //Update backgrounds to green
//                            self.backgrounds[0]=Color.green
//                            self.backgrounds[1]=Color.green
//                            self.backgrounds[2]=Color.green
                            self.backgrounds=self.backgrounds.map{
                                                   _ in Color.green
                                               }
                        }else{
                            self.credits-=self.betAmout
                        }
                    }){
                        Text("Spin")
                            .bold()
                            .foregroundColor(.white)
                            .padding(.all,10)
                            .padding([.leading,.trailing],30)
                            .background(Color.pink)
                            .cornerRadius(20)
                    }
                    Spacer()
                    
                    
                }
                
                
                
            }
            
            
        }
    }
    
    struct ContentView_Previews: PreviewProvider {
        static var previews: some View {
            ContentView()
        }
    }

代码顺便对背景进行了优化。当选中的时候背景会变绿色