SwiftUI：操作從“For - In”循環生成的單個項目

Question

阿羅哈，

介紹

我們的想法是創建一個問答游戲，其中您有不同數量的按鈕，一個答案是“正確”，其他答案是“錯誤”。 選擇任何按鈕時，“右鍵”的顏色應變為綠色，其余變為紅色。

應用程序的工作原理

該應用程序從名為 LectureTopics（見下文）的 Swift 文件加載所有數據。 LectureTopics 是一個包含許多變量（ButtonText、ButtonAnswerCorrect (Bool) Descriptions 等）的結構體和一個包含這些變量的內容的擴展（Level 1、2 等）

問題

我正在創建幾個帶有“for in”循環的按鈕（見下文）。 但是，所有按鈕都變為紅色或綠色。 該應用程序已經知道哪個按鈕是錯誤的或正確的。 為此，我使用“Level0ButValue”變量（見下文）。 然而，理論上它應該只將正確的答案變成綠色，其他的變成紅色。 真的很感激任何形式的幫助。 我還是編程新手 :-) 在此先感謝您！

struct Level0View: View {
    
    let lectureTopic: LectureTopic
    @State var Thacolor:String = "BlueAccent"
    
    var body: some View {
        
        VStack{
            Text(lectureTopic.Level0Name)
            .font(Font.custom("Arial", size: 24))
            .multilineTextAlignment(.center)
            .padding(.bottom)
            .padding()
            
            Text(lectureTopic.Level0Text)
            .font(Font.custom("Arial", size: 18))
            .multilineTextAlignment(.center)
            .padding()
            
            Text(lectureTopic.Level0Question)
            .font(Font.custom("Arial", size: 22))
            .fontWeight(.heavy)
            
            Spacer()
            
            VStack{
            
            ForEach(0..<self.lectureTopic.Level0Buttons.count)
            { number in
                
            Spacer()
                
            Button(action:
            {
                if self.lectureTopic.Level0ButValue[number] == true
                {
                    self.Thacolor = "GreenAccent"
                }
                else
                {
                    self.Thacolor = "RedAccent"
                }
            })
            {
            Text(self.lectureTopic.Level0Buttons[number])
            }
            .foregroundColor(.white)
            .padding()
            .padding([.leading, .trailing])
            .background(Color(self.Thacolor))
            .cornerRadius(10)
            }
            
            Spacer()
                
            Image("Window1")
                .resizable()
                .frame(width: 420, height: 190)
            
            }
            
        }
    
}
}

struct Level0View_Previews: PreviewProvider {
    static var previews: some View {
        Level0View(lectureTopic: LectureTopic.all()[0])
    }
}



struct LectureTopic: Identifiable {
    
    var id = UUID()
    let LectureTitle: String
    let MainMenuText: String
    let MainImage: String
    let OverviewText: String
    let Level0Name: String
    let Level0Text: String
    let Level0Question: String
    let Level0Buttons: [String]
    let Level0ButValue: [Bool]
    let Level1Name: String
    let Level1Text: String
  
}

extension LectureTopic
{
    static func all() -> [LectureTopic]
    {
        return
        [
            LectureTopic(
                LectureTitle: "Basics",
                MainMenuText: "Hier lernst du die Basics, von der Jobsuche bis hin zu allgemeinen Informationen.",
                MainImage: "Window1",
                OverviewText: "Nach drei Semestern studieren sucht Tim nach einer Möglichkeit erste, fachliche Berufserfahrung zu sammeln. Hierzu macht er sich auf die Suche nach einem Job den er neben dem Studium ausüben kann. ",
                Level0Name: "Wie kann Tim?",
                Level0Text: "Frage",
                Level0Question: "Text11",
                Level0Buttons: ["hi","Mu","Na"],
                Level0ButValue: [true,false,false],
                Level1Name: "alalal",
                Level1Text: "Jojo"),
            
        ]
    }
}

Answer 1

由於您希望在選擇一個按鈕后立即更改所有按鈕的顏色，因此您需要一個反映這一點的@State變量。

添加：

@State private var answered = false

然后你的按鈕將設置self.answered = true 。 按鈕的顏色將取決於已answered的狀態和self.lectureTopic.Level0ButValue[number] ：

Button(action:
{
    self.answered = true
})
{
    Text(self.lectureTopic.Level0Buttons[number])
}
.foregroundColor(.white)
.padding()
.padding([.leading, .trailing])
.background(Color(self.answered ? (self.lectureTopic.Level0ButValue[number] ? "GreenAccent" : "RedAccent") : "BlueAccent")))
.cornerRadius(10)

Answer 2

我准備了一個更通用的示例，它與您的代碼沒有直接關系，但正是您想要實現的。 然后，您可以將此方法應用於您的確切實現。 重要的部分是現在有第二個視圖用於按鈕，它有自己的@State來控制按鈕的顏色。

import SwiftUI

struct ContentView: View {
    
    let buttons = [ButtonData(text: "around 100", bool: false), ButtonData(text: "around 7.8 Billion", bool: true), ButtonData(text: "around 3712", bool: false)]
    
    var body: some View {
        VStack {
            
            Text("what is the world population in 2020?")
            
            ForEach(buttons) { buttonData in
                ButtonView(buttonData: buttonData)
            }
        }
    }
}

struct ButtonView: View {
    
    let buttonData: ButtonData
    
    @State private var color: Color = .primary
    
    var body: some View {
        Button {
            if buttonData.bool {
                color = .green
                return
            }
            color = .red
        } label: {
            Text(buttonData.text)
                .foregroundColor(color)
        }

    }
}

struct ButtonData: Identifiable {
    let id = UUID()
    let text: String
    let bool: Bool
}

Answer 3

我會改變方法，而不是

.background(Color(self.Thacolor))

我將有一個布爾值 (rightAnswer:Bool) 根據答案更改顏色

.background(rightAnser: .blue ? .red)