百日 学 Swift (Día 21) - Proyecto 2, segunda parte (Proyecto 2: Parte 2)
No seguí exactamente el contenido del tutorial e hice algunos ajustes correctamente
1. Preparación
(1) Cree una estructura de bandera nacional con dos atributos: el nombre de la imagen de la bandera ( flagName) y el nombre del país ( name).
struct country { // 国家
var flagName: String // 图片名称
var name: String // 国家名称
}
(2) Inicializar la matriz de banderas
let countryArray: [country] = [ // 初始化，这个内容不能放在 ContentView 中，否则报错
country(flagName: "Estonia", name: "爱沙尼亚"),
country(flagName: "France", name: "法国"),
country(flagName: "Germany", name: "德国"),
country(flagName: "Ireland", name: "爱尔兰"),
country(flagName: "Italy", name: "意大利"),
country(flagName: "Nigeria", name: "尼日利亚"),
country(flagName: "Poland", name: "波兰"),
country(flagName: "Russia", name: "俄罗斯"),
country(flagName: "Spain", name: "西班牙"),
country(flagName: "UK", name: "英国"),
country(flagName: "US", name: "美国")
]
El código de los dos pasos anteriores debe colocarse fuera de la estructura de ContentView, de lo contrario se informará un error.
(3) Prepara el tema
@State private var countries = countryArray.shuffled() // 打乱数组元素顺序
@State private var correctAnswer = Int.random(in: 0...2) // 在 0-2 之间随机选一个值
La diferencia entre barajar y barajar
El efecto de la codificación es el mismo, pero el propósito es diferente.
func shuffled() -> [Base.Element]
Barajar
Es una función mutante, utilizada para cambiarse a sí misma, por lo que *** no tiene valor de retorno ***, el cambio es *** el que llama *** mismo.
mutating func shuffle()
* (4) Indique el estado de las puntuaciones registradas
@State private var score = 0 // 得分，答对数量
@State private var questionNum = 0 // 题目数
Botones de apilamiento de hasta 2. (botones apilados)
Con las preparaciones anteriores, es hora de diseñar la interfaz de usuario y usar VStack como contenedor.
(1) Use un VStack para ajustar el texto primero.
VStack(spacing: 20) {
Text("猜国旗")
.font(.largeTitle)
.fontWeight(.black)
Text("请点击下面你认为正确的国旗")
// .font(.subheadline)
.fontWeight(.bold)
Text(countries[correctAnswer].name)
.font(.title)
.fontWeight(.black)
}.foregroundColor(.white)
(2) Use el bucle para crear tres botones. La imagen del botón es la bandera nacional y la acción es llamar flagTapped(). El valor de índice del botón actual se pasa para verificar si es correcto.
ForEach(0..<3) { number in
Button(action: {
self.flagTapped(number) // 按钮动作
}) {
Image(self.countries[number].flagName)
.renderingMode(.original)
.clipShape(Capsule())
.overlay(Capsule().stroke(Color.gray, lineWidth: 1))
}
.shadow(color: Color(.white), radius: 5, x: 15, y: 15)
}
(3) Ponga el botón y la parte de texto juntos en un VStack.
(4) Use el paquete ZStack para agregar un color de fondo a la capa inferior.
ZStack {
// Color.blue.edgesIgnoringSafeArea(.all) 是另一种使用纯色的方法
LinearGradient(
gradient: Gradient(colors: [.blue, .black]),
startPoint: .topLeading,
endPoint: .bottomLeading).edgesIgnoringSafeArea(.all) // 使用渐进做底色
VStack(spacing: 30) {
VStack(spacing: 20) { //文字部分
(5) Ajuste la interfaz adecuadamente, como márgenes, fuentes, colores, etc.
var body: some View {
ZStack {
// Color.blue.edgesIgnoringSafeArea(.all)
LinearGradient(
gradient: Gradient(colors: [.blue, .black]),
startPoint: .topLeading,
endPoint: .bottomLeading).edgesIgnoringSafeArea(.all) // 使用渐进做底色
VStack(spacing: 30) {
VStack(spacing: 20) { //文字部分
Text("猜国旗")
.font(.largeTitle)
.fontWeight(.black)
Text("请点击下面你认为正确的国旗")
// .font(.subheadline)
.fontWeight(.bold)
Text(countries[correctAnswer].chsName) // 国家中文名字
.font(.title)
.fontWeight(.black)
}.foregroundColor(.white)
ForEach(0..<3) { number in // 三个按钮
Button(action: {
self.flagTapped(number) // 按钮动作
}) {
Image(self.countries[number].name) // 图片名称
.renderingMode(.original) // 显示原图
.clipShape(Capsule()) // 剪裁成胶囊形状
.overlay(Capsule().stroke(Color.black, lineWidth: 1)) // 边框
}
.shadow(color: Color(.black), radius: 5, x: 0, y: 5) // 阴影
}
Spacer()
}
.padding(.top, 30) // 边距
}
.alert(isPresented: $showingScore) {
Alert(
title: Text(scoreTitle),
message: Text("你已经猜了 \(questionNum) 次\n你猜对了 \(score) 次"),
dismissButton: .default(Text("继续")){
self.askQuestion()
})
}
}
La actuación en la puntuación del jugador 2. Alerta con AN (mensaje de advertencia se muestra mediante la puntuación del jugador)
(1) Declarar el estado del cuadro de diálogo de advertencia de control
@State private var showingScore = false // 控制显示警告，默认不显示
@State private var scoreTitle = "" // 警告信息
(2) La función flagTapped en respuesta a la acción de clic del botón
func flagTapped(_ number: Int) {
questionNum += 1 // 题目数量 +1
if number == correctAnswer {
scoreTitle = "恭喜你，答对了！！"
score += 1 // 答对时，得分 +1
} else {
scoreTitle = "不太对呢，再想想？"
}
showingScore = true
}
(3) Agregar modificador de alerta a ZStack
.alert(isPresented: $showingScore) {
Alert(
title: Text(scoreTitle),
message: Text("你已经猜了 \(questionNum) 次\n你猜对了 \(score) 次"),
dismissButton: .default(Text("继续")){
self.askQuestion() // 点击 继续 按钮的动作
})
}
(4) Restablecer la pregunta askQuestion
func askQuestion() {
countries.shuffle()
correctAnswer = Int.random(in: 0...2)
}
3. Diseñar nuestras banderas (modificar el estilo de la bandera)
Image(self.countries[number].name) // 图片名称
.renderingMode(.original) // 显示原图
.clipShape(Capsule()) // 剪裁成胶囊形状
.overlay(Capsule().stroke(Color.black, lineWidth: 1)) // 边框
