如何更改按钮动态数组中一个按钮的图片 SwiftUI

Question

我有一个动态的按钮数组。 按一个按钮，它的图片应该改变，rest不应该改变。 但是当我点击任何按钮时，所有元素的图片也会发生变化。

怎么做到，当你点击一个按钮时，只有这个按钮的图片改变，而rest不改变？ 谢谢

import SwiftUI

struct Result {
    var id = UUID()
    var score: Int
}

struct DynamicButtonsView: View {
    
    let results = [Result(score: 8), Result(score: 5), Result(score: 10), Result(score: 12) , Result(score: 33)]
    
    @State var imageName: String = "UnselectedSircle"
    
    var body: some View {
        VStack {
            ForEach(results, id:(\.id)) { result in
                Button(action: {
                    print(result.score)
                    print(imageName)
                    self.imageName = "SelectedCircle"
                }, label: {
                    Image(imageName)
                    .resizable()
                    .scaledToFill()
                    Text("\(result.score)")
                }).frame(width: 50, height: 50, alignment: .center)
            }
        }
    }
}

struct DynamicButtonsView_Previews: PreviewProvider {
    static var previews: some View {
        DynamicButtonsView()
    }
}

Answer 1

这段代码就像魅力一样工作，在 iPhone 6s (iOS 14.4) 上测试

struct Result {
    var id = UUID()
    var score: Int
    var isSected:Bool = false
}
struct test: View {
  @State private var myList = [Result(score: 23),Result(score: 33),Result(score: 28),Result(score: 11)]
var body: some View {
    List(myList,id:\.id){item in
        HStack{
            Text("\(item.score)")
            Spacer()
            Button(action: {
                guard let index = myList.firstIndex(where: {$0.id == item.id})else{
                    return
                }
                myList[index].isSected.toggle()
            }, label: {
                Image(systemName:item.isSected ? "circle.fill" : "circle")
            })
            
        }
    }
}

}

Answer 2

因此，如果我对您的理解正确，您希望任何被点击的按钮都可以改变其图片，而任何未被点击的按钮都不会改变？ 几乎代表按钮的一些“选择状态”？

基本上，你必须 model state 你想看。 如果您的视图只需要了解选择 state，您可以将 model 作为一组 UUID，如下所示：

    struct DynamicButtonsView: View {
    
    let results = [Result(score: 8), Result(score: 5), Result(score: 10), Result(score: 12) , Result(score: 33)]
    @State var selectedIDs = Set<UUID>()
    
    @State var imageName: String = "checkmark.circle"
    
    var body: some View {
        VStack {
            ForEach(results, id:(\.id)) { result in
                Button(action: {
                    if selectedIDs.contains(result.id) {
                        selectedIDs.remove(result.id)
                    } else {
                        selectedIDs.insert(result.id)
                    }
                    print(result.score)
                    print(imageName)
                }, label: {
                    Image(systemName: selectedIDs.contains(result.id) ? "checkmark.circle.fill" : "checkmark.circle")
                    .resizable()
                    .scaledToFill()
                    Text("\(result.score)")
                }).frame(width: 50, height: 50, alignment: .center)
            }
        }
    }
}

注意：我更改图像纯粹是因为我没有您的资产目录，所以我使用了一些来自 SFSymbols 的随机图像作为示例。