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

Question

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

setImage(_:for:)大概，看起来和说到的时候很相似UIButton。

到目前为止我所做的是：

Button(action: {}) {
    Text("Add To Cart")
        .foregroundColor(.black)
        .padding(.all, 10.0)
}
.background(Color.gray)
.cornerRadius(5.0)

结果非常接近所需的结果：

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

如何解决呢？

Answer 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，您会发现它基本上是 a View，因此您不必强制返回Text它的类型（如问题的代码片段中所述）。

Text显然，您可以通过在 之前添加图像来将图像添加到标签右侧Image。另外，如果您打算在图像顶部添加文本（反之亦然），您可以简单地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())