SwiftUI - 如何在点击时更改按钮的图像？

Posted 2023-02-24

【中文标题】SwiftUI - 如何在点击时更改按钮的图像？

【英文标题】：SwiftUI - How to change the button's image on click?

【发布时间】：2020-06-05 16:56:57

【问题描述】：

我正在尝试这样做，以便当我单击一个按钮（这是其他按钮列表的一部分）时，单击按钮的图像从“star”变为“star.fill”。请帮忙！

ForEach(pies, id: \.self)  pie in
      Button(action: 
          // some action
       ) 
       HStack 
           Image(systemName: "star")
           Text(pie)
           Spacer()
       

【参考方案1】：

我有一个播放/暂停按钮。 按钮图像会根据它是否正在播放而变化。

在我看来，我有一个变量：

@State var isPlaying : Bool = false

然后，每当您单击按钮时，isPlaying 都会发生变化 -> 如果为真，则变为假，反之亦然。按钮图片由ternary operator设置。

Button(action: 
   self.isPlaying.toggle()
) 
    Image(systemName: self.isPlaying == true ? "pause.fill" : "play.fill")
          .resizable()
          .frame(width: 60, height: 60)

【参考方案2】：

您可以使用@State 变量来存储图像名称并在单击按钮时更改它：

@State var imageName: String = "star"

ForEach(pies, id: \.self)  pie in
      Button(action: 
          self.imageName = "star.fill"
       ) 
       HStack 
           Image(systemName: imageName)
           Text(pie)
           Spacer()
       

【讨论】：

感谢您的回答！不幸的是，这不能解决我的问题，因为当单击其中一个按钮时，它会将 ForEach 下的所有按钮更改为 star.fill。我的目标是只让点击的按钮改变它的图像。你知道这里可以做什么吗？

对每个按钮使用不同的变量？甚至更好的数组。

在 SwiftUI 中，Button 似乎是少数不基于 UIKit 构建的视图之一。好处是 SwiftUI 中的 Button 是一个非常灵活的结​​构。这样做的缺点是它不支持 UIKit 按钮内置的状态概念（以及用于单击/未单击的不同图像/标签），并且至少在当前版本的 SwiftUI 中，您确实需要正如 pawello2222 所说，从外部状态模型驱动按钮图像名称。