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

Question

我想实现这样的功能：当我点击一个按钮（这个按钮是其他按钮列表中的一部分），被点击的按钮上的图片从“star”变成“star.fill”。请帮忙！

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

- user13676807

Answer 1

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

在我的视图中，我有一个变量：

@State var isPlaying : Bool = false

每当您点击按钮时，isPlaying都会改变——如果它为真，则变为假，反之亦然。按钮图像是由三元运算符设置的。

Button(action: {
   self.isPlaying.toggle()
}) {
    Image(systemName: self.isPlaying == true ? "pause.fill" : "play.fill")
}

- stackich

Answer 2

您可以使用自定义按钮样式来确定基于按下状态显示哪个图像：

struct ImageButtonStyle: ButtonStyle { 
    var image: String
    var pressedImage: String

    func makeBody(configuration: Self.Configuration) -> some View {
      let displayImage = configuration.isPressed ? pressedImage : image
      return Image(displayImage, bundle: Bundle(for: SomeClassInYourApp.self))
    }
}

为了方便使用，您可以创建一个使用按钮样式的视图：

struct ImageButton: View {
    
    var image: String
    var pressedImage: String
    var action: () -> Void
    
    var body: some View {
        Button(action: self.action) { }
            .buttonStyle(ImageButtonStyle(image: image, pressedImage: pressedImage)
    }
}

然后像这样使用它：

ImageButton(
    image: "your_unpressed_image", 
    pressedImage: "your_pressed_image", 
    action: { ... }
)

- akerra

Answer 3

您可以使用@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()
       }
}

- pawello2222

---

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

为每个按钮使用不同的变量？或者更好的方法是使用数组。 - pawello2222

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