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

Question

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

大概，说到UIButton，好像和setImage(_:for:)差不多。

到目前为止我所做的是：

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

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

但是，我在 SwiftUI Button 中找不到任何与设置图像相关的 property/method。

如何解决？

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 的类型，你会发现它基本上是一个 View，所以你不必为它强制 return 一个 Text 类型（如前所述在问题的代码片段中）。

显然，您可以通过在 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())

Answer 2

你为什么不

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

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

How to set image to button in SwiftUI?

button

swiftui