剛開始使用 SwiftUI，所以我可能缺少一些簡單的東西。
當按下“CHECK”按鈕時，我想用與 question.correctChoiceIndex 匹配的索引更改按鈕的背景顏色，以及用戶選擇的按鈕（如果不正確的話）。
我不確定如何使用函式實際參考按鈕（如果這是最好的方法），我認為這可能很困難，因為按鈕是使用 AnswerButton 結構制作的。
這是我的代碼
import SwiftUI
struct ContentView: View {
let question: Question
@State var guessedIndex: Int? = nil
var body: some View {
VStack{
Spacer()
Text(question.questionText)
.padding()
VStack {
ForEach(question.AnswerChoices.indices) {index in
AnswerButton(text: question.AnswerChoices[index]){
guessedIndex = index
}
.border(selectChoice(at: index), width: 4)
}}
Spacer()
Text("Answer feedback")
.padding()
Spacer()
HStack{
Button("CHECK") {
}
.padding()
Button("NEXT") {
/*@START_MENU_TOKEN@*//*@PLACEHOLDER=Action@*/ /*@END_MENU_TOKEN@*/
}
.padding()
}
}
}
func selectChoice(at buttonIndex: Int) -> Color {
if buttonIndex == guessedIndex {
return .gray
}
else {
return .clear
}
}
}
struct AnswerButton: View {
let text: String
let onClick: () -> Void
var body: some View {
Button(action: {
onClick()
}) {
Text(text)
}
.padding()
.background(Color.yellow)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
Group {
ContentView(question: Question.AllQuestions[0])
}
}
}
我認為遍歷視圖中的所有按鈕并檢查它們的索引可以作業，但這樣做似乎也有點低效。
uj5u.com熱心網友回復：
必須對問題做出一些假設，并且有更好的方法可以構造它，但這是可行的。
如果選擇并選中，這會將錯誤答案標記為紅色，并將正確答案標記為綠色。
您可能還需要在檢查后禁用按鈕或進度。
import SwiftUI
struct Question {
let questionText: String
let answerChoices: [String]
let correctAnswerIndex: Int
}
struct ContentView: View {
let question: Question
@State var guessedIndex: Int? = nil
@State var didCheck = false
var body: some View {
VStack {
Spacer()
Text(question.questionText)
.padding()
ForEach(0 ..< question.answerChoices.count) { index in
let answer = question.answerChoices[index]
AnswerButton(text: answer,
isCorrectAnswer: index == question.correctAnswerIndex,
didCheck: didCheck,
isSelected: index == guessedIndex) {
guessedIndex = index
}
}
Spacer()
Text("Answer feedback")
.padding()
Spacer()
HStack{
Button("CHECK") {
didCheck = true
}
.padding()
Button("NEXT") {
}
.padding()
}
}
}
}
struct AnswerButton: View {
let text: String
let isCorrectAnswer: Bool
let didCheck: Bool
let isSelected: Bool
let onClick: () -> Void
var body: some View {
Button(text, action: onClick)
.padding()
.border(isSelected ? .gray : .clear)
.background(backgroundColorForCurrentState())
}
func backgroundColorForCurrentState() -> Color {
switch (didCheck, isCorrectAnswer, isSelected) {
case (true, false, true):
return .red
case (true, true, _):
return .green
case (_, _, _):
return .yellow
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
Group {
ContentView(question: Question(questionText: "examnple",
answerChoices: ["one", "two", "three"],
correctAnswerIndex: 1))
}
}
}
uj5u.com熱心網友回復：
在 SwiftUI 中，您不參考按鈕等...，您更改視圖的狀態。
您可以嘗試這種方法，與您的初始代碼庫保持一致。
請注意，還有許多其他方法可以實作您想要的效果，特別是我建議您查看此鏈接，它為您提供了如何在應用程式中管理資料的示例： https ://developer.apple.com/documentation/swiftui /在您的應用程式中管理模型資料
// for testing
struct Question: Identifiable {
let id = UUID()
var questionText: String
var answerChoices: [String]
}
struct ContentView: View {
// for testing
let question: Question = Question(questionText: "some question", answerChoices: ["answer-1","answer-2","answer-3"])
@State var guessedIndex: Int? = nil
@State var isCorrect: Bool = false // <-- here
var body: some View {
VStack{
Spacer()
Text(question.questionText).padding()
VStack {
ForEach(question.answerChoices.indices, id: \.self) { index in // <-- here
AnswerButton(text: question.answerChoices[index]) {
guessedIndex = index
isCorrect = false // <-- here
}
.border(guessedIndex == index ? .green : .clear, width: 4) // <-- here
.background(guessedIndex == index && isCorrect ? .gray : .yellow) // <-- here
}
}
Spacer()
Text("Answer feedback").padding()
Spacer()
HStack{
Button("CHECK") {
checkAnswer() // <-- here
}.padding()
Button("NEXT") {
}.padding()
}
}
}
func checkAnswer() {
// some logic here to determine which answer is correct
isCorrect = guessedIndex == 1 // for testing, answer-2
}
}
struct AnswerButton: View {
let text: String
let onClick: () -> Void
var body: some View {
Button(action: {
onClick()
}) {
Text(text)
}
.padding()
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/536724.html
標籤：ios迅速迅捷