如何在 SwiftUI 中将图像设置为按钮？

Posted 2023-02-24

【中文标题】如何在 SwiftUI 中将图像设置为按钮？

【英文标题】：How to set image to button in SwiftUI?

【发布时间】：2019-09-08 16:11:17

【问题描述】：

我想添加一个带有图片的按钮（在左侧），如下：

可能，当涉及到UIButton时，它似乎与setImage(_:for:)相似。

到目前为止我所做的是：

Button(action: ) 
    Text("Add To Cart")
        .foregroundColor(.black)
        .padding(.all, 10.0)

.background(Color.gray)
.cornerRadius(5.0)

结果与要求的结果非常接近：

但是，我在SwiftUI Button 中找不到任何与设置图像相关的属性/方法。

如何解决？

【参考方案1】：

您可以将其实现为：

Button(action: ) 
    HStack(alignment: .center, spacing: 5.0) 
        Image("cart")
            .padding(.leading, 10.0)
        Text("Add to Cart")
            .foregroundColor(.black)
            .padding(.all, 10.0)
    

.background(Color.gray)
.cornerRadius(5.0)

传递 HStack 而不是 Text 就可以了。

为了澄清，在按钮标签旁边添加图像不再与按钮直接相关！当使用init(action:label:) 初始化器创建按钮时，我们将() -> Label 作为第二个参数传递；如果您跟踪Label 的类型，您会发现它基本上是View，因此您不必为它返回Text 类型（如问题代码sn-p 中所述）。

显然，您可以通过在Image 之前添加Text 来将图像添加到标签的右侧。此外，如果您的目标是在图像顶部添加文本（反之亦然），您可以简单地将 HStack 替换为 VStack。

---

此外，更可重用的代码

您可以通过为按钮创建自定义主体View 来使您的代码更易于重用。此外，您可以创建一个自定义ViewModifier：

import SwiftUI

// Custom View
struct CustomButtonBody: View 
    private var iconName: String
    private var title: String

    init(iconName: String = "cart", title: String) 
        self.iconName = iconName
        self.title = title
    

    var body: some View 
        HStack(alignment: .center, spacing: 5.0) 
            Image(iconName)
                .padding(.leading, 10.0)
            Text(title)
                .foregroundColor(.black)
                .padding(.all, 10.0)
        
    


// Custom Modifier
struct CustomButtonModifier: ViewModifier 
    func body(content: Content) -> some View 
        return content
            .background(Color.gray)
            .cornerRadius(5.0)
    

因此：

Button(action: ) 
    CustomButtonBody(title: "Add to Cart")

.modifier(CustomButtonModifier())

【参考方案2】：

你为什么不直接

Button(action: ) 
    Label("Add to cart", systemImage: "cart")