• 筆記
  • 堆疊按鈕
  • 顯示玩家的分?jǐn)?shù)并發(fā)出警報
  • 設(shè)計我們的旗幟
  • 升級我們的設(shè)計

筆記

本篇文章記錄一下100 Days of SwiftUI第21-22天的筆記內(nèi)容

堆疊按鈕

struct ContentView: View {
    var countries = ["Estonia", "France", "Germany", "Ireland", "Italy", "Nigeria", "Poland", "Russia", "Spain", "UK", "US"]
    var correctAnswer = Int.random(in: 0...2)

    Zstack {
        Color.blue
            .ignoreSafeArea

        VStack(spacing: 30) {
            VStack {
                Text("Tap the flag of")
                  .foregroundColor(.white)
                Text(countries[correctAnswer])
                 .foregroundColor(.white)
            }

            ForEach(0..<3) { number in
                Button {
                    // flag was tapped
                } label: {
                    Image(countries[number])
                        .renderingMode(.original)
                }
            }
        }
    } 
}

顯示玩家的分?jǐn)?shù)并發(fā)出警報

struct ContentView: View {
    @State private var showingScore = false
    @State private var scoreTitle = ""

    // askQuestion函數(shù)中更改尚未標(biāo)記為@State的視圖屬性是不允許的
    @State private var countries = ["Estonia", "France", "Germany", "Ireland", "Italy", "Nigeria", "Poland", "Russia", "Spain", "UK", "US"].shuffled() // shuffled()方法自動為我們處理數(shù)組順序的隨機(jī)化
    @State private var correctAnswer = Int.random(in: 0...2)

    Zstack {
        Color.blue
            .ignoreSafeArea

        VStack(spacing: 30) {
            VStack {
                Text("Tap the flag of")
                  .foregroundColor(.white)
                Text(countries[correctAnswer])
                 .foregroundColor(.white)
            }

            ForEach(0..<3) { number in
                Button {
                    flagTapped(number)
                } label: {
                    Image(countries[number])
                        .renderingMode(.original)
                }
            }
        }
        .alert(scoreTitle, isPresented: $showingScore) {
            Button("Continue", action: askQuestion)
        } message: {
            Text("Your score is ???")
        }
    } 

    func flagTapped(_ number: Int) {
        if number == correctAnswer {
            scoreTitle = "Correct"
        } else {
            scoreTitle = "Wrong"
        }

        showingScore = true
    }

    // 通過重新排列國家/地區(qū)并選擇新的正確答案來重置游戲
    func askQuestion() {
        countries.shuffle()
        correctAnswer = Int.random(in: 0...2)
    }
}

設(shè)計我們的旗幟

// 背景色修改
Color.blue
    .ignoresSafeArea()
// 替換為
LinearGradient(gradient: Gradient(colors: [.blue, .black]), startPoint: .top, endPoint: .bottom)
    .ignoresSafeArea()

// 標(biāo)題大小和樣式修改
// font()修飾符來控制文本的大小和樣式
// weight()調(diào)整字體的粗細(xì)
.font(.subheadline.weight(.heavy))
.font(.largeTitle.weight(.semibold))

// 優(yōu)化旗幟圖像
// 形狀：.clipShape()
// 四個內(nèi)置形狀：矩形、圓角矩形、圓形和膠囊
.clipShape(Capsule())  // 膠囊形狀
// 陰影：.shadow()
// 獲取陰影的顏色、半徑、X 和 Y 偏移量，但如果跳過顏色，我們會得到半透明的黑色，如果我們跳過 X 和 Y，則假定它們?yōu)?0（圓心）
.shadow(radius: 5)

升級我們的設(shè)計

// 調(diào)整背景，有趣的效果
RadialGradient(stops: [
    .init(color: Color(red: 0.1, green: 0.2, blue: 0.45), location: 0.3),
    .init(color: Color(red: 0.76, green: 0.15, blue: 0.26), location: 0.3),
], center: .top, startRadius: 200, endRadius: 400)
    .ignoresSafeArea()

// 突出游戲部分
.frame(maxWidth: .infinity)  // 調(diào)整大小，水平拉伸占據(jù)所有空間
.padding(.vertical, 20) // 垂直內(nèi)邊距
.background(.regularMaterial) // 模糊背景
.clipShape(RoundedRectangle(cornerRadius: 20)) // 裁剪為圓角矩形
、、