Question

我想让每个按钮在点击时都改变其颜色，而在再次点击时改变其颜色。因此，我做了一个布尔didTap，并根据其值更改了背景。

此刻的代码会更改每个按钮的背景。从其他帖子中了解到，这个Buttons系统无法正常运行。

该怎么办？如何获得我需要的结果？我应该使用其他东西（不是Button）吗？我是否应该使用诸如didTapB1之类的东西？（如果使用它，似乎会是很长的代码？）

import SwiftUI

var headLine = ["B", "I", "N", "G", "O"]
var numB = ["5","9","11","15","9"]
var numI = ["16","19","21","25","22"]
var numN = ["35","39","41","45","42"]
var numG = ["55","59","61","57","52"]
var numO = ["66","69","71","75","72"]

struct TestView: View {

@State private var didTap:Bool = false
 var body: some View {


    ZStack {
        Color.orange
    .edgesIgnoringSafeArea(.all)


    HStack {

        VStack {
            Text("B")
                ForEach(numB, id: \.self) { tekst in
                   Button(action: {
                    if self.didTap == false {
                        self.didTap = true
                    } else {
                        self.didTap = false
                    }

                        }) {
                    Text(tekst)
                        .padding()
                        .background(self.didTap ? Color.red : Color.black)
                            .clipShape(Circle())
                }
            }
        }
        VStack {
            Text("I")
                ForEach(numI, id: \.self) { tekst in
                   Button(action: {
                    if self.didTap == false {
                        self.didTap = true
                    } else {
                        self.didTap = false
                    }

                        }) {
                    Text(tekst)
                        .padding()
                        .background(self.didTap ? Color.red : Color.black)
                            .clipShape(Circle())
                }
            }
        }
    VStack {
        Text("N")
            ForEach(numN, id: \.self) { tekst in
               Button(action: {
                if self.didTap == false {
                    self.didTap = true
                } else {
                    self.didTap = false
                }

                    }) {
                Text(tekst)
                    .padding()
                    .background(self.didTap ? Color.red : Color.black)
                        .clipShape(Circle())
            }
        }
    }
        VStack {
            Text("G")
                ForEach(numG, id: \.self) { tekst in
                   Button(action: {
                    if self.didTap == false {
                        self.didTap = true
                    } else {
                        self.didTap = false
                    }

                        }) {
                    Text(tekst)
                        .padding()
                        .background(self.didTap ? Color.red : Color.black)
                            .clipShape(Circle())
                }
            }
        }
        VStack {
            Text("O")
                ForEach(numO, id: \.self) { tekst in
                   Button(action: {
                    if self.didTap == false {
                        self.didTap = true
                    } else {
                        self.didTap = false
                    }

                        }) {
                    Text(tekst)
                        .padding()
                        .background(self.didTap ? Color.red : Color.black)
                            .clipShape(Circle())
                }
            }
        }
    }
    }
  }
}

Answer 1

您需要为每个按钮添加didTap。您可以通过创建自定义视图来简单地做到这一点：

struct BingoButton: View {
    var text: String
    @State private var didTap = false

    var body: some View {
        Button(action: {
            self.didTap.toggle()
        }) {
            Text(text)
            .padding()
            .background(didTap ? Color.red : Color.black)
                .clipShape(Circle())
        }
    }
}

然后您可以将实现更改为以下内容：

        VStack {
            Text("I")
                ForEach(numI, id: \.self) { tekst in
                   BingoButton(text: tekst)
                }
            }
        }

您可以考虑更改模型，并使UI定义更小且不重复：

struct BingoRow: Identifiable {
    let id = UUID()
    let headline: String
    let numbers: [String]
}

struct SimpleView: View {
    var rows = [
        BingoRow(headline: "B", numbers: ["5","9","11","15","9"]),
        BingoRow(headline: "I", numbers: ["16","19","21","25","22"]),
        BingoRow(headline: "N", numbers: ["35","39","41","45","42"]),
        BingoRow(headline: "G", numbers: ["55","59","61","57","52"]),
        BingoRow(headline: "O", numbers: ["66","69","71","75","72"])
    ]

    var body: some View {
        HStack {
            ForEach(rows) { row in
                VStack {
                    Text(row.headline)
                    ForEach(row.numbers, id: \.self) { text in
                        BingoButton(text: text)
                    }
                }
            }
        }
    }
}

如何通过在SwiftUI中按下更改自己的背景颜色来制作每个按钮？

1 个答案: