100 Days of SwiftUI - Day 21 猜旗项
2020-10-19 本文已影响0人
星星星宇
1.将按钮堆叠
struct ContentView: View {
var countries = ["Estonia", "France", "Germany", "Ireland", "Italy", "Nigeria", "Poland", "Russia", "Spain", "UK", "US"]
var correctAnswer = Int.random(in: 0...2)
var body: some View {
ZStack {
Color.blue.edgesIgnoringSafeArea(.all)
VStack(spacing: 30) {
VStack {
Text("Tap the flag of")
.foregroundColor(.white)
Text(countries[correctAnswer])
.foregroundColor(.white)
}
ForEach(0 ..< 3) { number in
Button(action: {
}, label: {
Image(countries[number])
.renderingMode(.original)
})
}
Spacer()
}
}
}
}
2.添加alert,提示得分
struct ContentView: View {
@State private var countries = ["Estonia", "France", "Germany", "Ireland", "Italy", "Nigeria", "Poland", "Russia", "Spain", "UK", "US"].shuffled()
@State private var correctAnswer = Int.random(in: 0...2)
@State private var scoreTitle = ""
@State private var showingScore = false
var body: some View {
ZStack {
Color.blue.edgesIgnoringSafeArea(.all)
VStack(spacing: 30) {
VStack {
Text("Tap the flag of")
.foregroundColor(.white)
Text(countries[correctAnswer])
.foregroundColor(.white)
}
ForEach(0 ..< 3) { number in
Button(action: {
flagTappped(number)
}, label: {
Image(countries[number])
.renderingMode(.original)
})
}
Spacer()
}
}
.alert(isPresented: $showingScore, content: {
Alert(title: Text(scoreTitle), message: Text("Your score is ???"), dismissButton: Alert.Button.default(Text("Continue"), action: {
askQuestion()
}))
})
}
func flagTappped(_ number: Int) {
if number == correctAnswer {
scoreTitle = "Correct"
} else {
scoreTitle = "Wrong"
}
showingScore = true
}
func askQuestion() {
_=countries.shuffled()
correctAnswer = Int.random(in: 0...2)
}
}
3.添加一些样式
ZStack {
LinearGradient(gradient: Gradient(colors: [.blue, .black]), startPoint: .top, endPoint: .bottom)
.edgesIgnoringSafeArea(.all)
VStack(spacing: 30) {
VStack {
Text("Tap the flag of")
.foregroundColor(.white)
Text(countries[correctAnswer])
.foregroundColor(.white)
.font(.largeTitle)
.fontWeight(.black)
}
ForEach(0 ..< 3) { number in
Button(action: {
flagTappped(number)
}, label: {
Image(countries[number])
.renderingMode(.original)
.clipShape(Capsule())
.overlay(Capsule().stroke(Color.black, lineWidth: 1.0))
.shadow(color: .black, radius: 2)
})
}
Spacer()
}
}
.alert(isPresented: $showingScore, content: {
Alert(title: Text(scoreTitle), message: Text("Your score is ???"), dismissButton: Alert.Button.default(Text("Continue"), action: {
askQuestion()
}))
})
}