SwiftUI + Button 的动态操作闭包

Question

我正在探索 SwiftUI，并且能够创建 Button 的子类。

子类包含image & title 属性，这使它成为一个可重用的组件。

但我无法为 Button 类定义动态操作行为。

请参考下面的代码。

圆形按钮的子类：

struct RoundButton: View {
    var image: String
    var title: String
    var body: some View {
        VStack {
            Button(action: {
                print("Button pressed")
            }){
                Image(image)                
                   .renderingMode(Image.TemplateRenderingMode?.init(Image.TemplateRenderingMode.template))
            }
            .frame(width: 40, height: 40)
            .background(Color.blue)
            .cornerRadius(20)
            .accentColor(.white)

            Text(title)
                .font(.footnote)
        }
    }
}

使用示例：

HStack(alignment: .center) {
    Spacer(minLength: 50)
    RoundButton(image: "chat", title: "message")
    Spacer()
    RoundButton(image: "call", title: "call")
    Spacer()
    RoundButton(image: "video", title: "video")
    Spacer()
    RoundButton(image: "mail", title: "mail")
    Spacer(minLength: 50)
}

您将在此处看到action 块打印一条消息。

我想知道我们如何为按钮的动作事件传递函数？

Answer 1

按钮更新...

struct RoundButton: View {
    var image: String
    var title: String
    var action: () -> Void

    var body: some View {
        VStack {
            Button(action: action){
                Image(image)
                   .renderingMode(Image.TemplateRenderingMode?.init(Image.TemplateRenderingMode.template))
            }
    ...

使用更新...

RoundButton(image: "chat", title: "message") {
    print("Button pressed")
}

Answer 2

这是另一种方法，您可以直接创建自定义按钮而无需对其进行操作！如果您需要执行某个操作，您也可以执行此操作，例如 ContentView 中的示例：

PS：我注意到你刚刚给 Image 赋予了点击或点击的可能性，这使得点击或点击更加困难！相反，您可以将所有内容放在 VStack 中，这样可以更轻松地为用户点击或单击，并且可以更好地点击动画。而且你不需要使用cornerRadius来制作圆形，你可以使用clipShape。

struct RoundButton: View {
    
    var image: String
    var title: String
    var action: (() -> Void)?
    
    init(image: String, title: String, action: (() -> Void)? = nil) {
        self.image = image
        self.title = title
        self.action = action
    }
    
    var body: some View {
        VStack {
            Button(action: {
                action?()
            }){
                VStack {
                    Image(image)
                        .renderingMode(Image.TemplateRenderingMode?.init(Image.TemplateRenderingMode.template))
                        .frame(width: 40, height: 40)
                        .background(Color.blue)
                        .foregroundColor(.white)
                        .clipShape(Circle())

                    Text(title)
                        .font(.footnote)
                        .foregroundColor(.black) 
                }
            }
        }
    }
}

---

用例：

struct ContentView: View {
    
    var body: some View {
        
        RoundButton(image: "person", title: "person")

        RoundButton(image: "person", title: "person", action: { print("Button pressed") })

        RoundButton(image: "person", title: "person") {
            print("Button pressed") 
        }

    }
}