如何在SwiftUI中创建可复用按钮组件？求最佳实践指导

1. 基础可复用结构：最小可用版本 #

先从核心需求出发，封装一个能快速复用的基础按钮，只保留最必要的标题和点击回调参数：

import SwiftUI

struct ReusableButton: View {
    let title: String
    let action: () -> Void
    
    var body: some View {
        Button(action: action) {
            Text(title)
                .font(.headline)
                .foregroundColor(.white)
                .padding()
                .frame(maxWidth: .infinity)
                .background(Color.blue)
                .cornerRadius(8)
        }
    }
}

// 使用示例
struct ContentView: View {
    var body: some View {
        VStack(spacing: 16) {
            ReusableButton(title: "提交表单") {
                print("表单提交逻辑")
            }
            
            ReusableButton(title: "返回首页") {
                print("返回首页逻辑")
            }
        }
        .padding()
    }
}

2. 扩展参数：适配多场景需求 #

为了覆盖不同业务场景，给按钮添加可配置的可选参数（带默认值，降低使用成本），支持自定义样式、状态和图标：

struct ReusableButton: View {
    // 核心必填参数
    let title: String
    let action: () -> Void
    
    // 可选配置参数
    var backgroundColor: Color = .blue
    var foregroundColor: Color = .white
    var cornerRadius: CGFloat = 8
    var isDisabled: Bool = false
    var icon: Image? = nil // 支持左右侧图标
    
    var body: some View {
        Button(action: action) {
            HStack(spacing: 8) {
                icon?.foregroundColor(foregroundColor)
                Text(title)
                    .font(.headline)
                    .foregroundColor(foregroundColor)
            }
            .padding()
            .frame(maxWidth: .infinity)
            .background(isDisabled ? backgroundColor.opacity(0.5) : backgroundColor)
            .cornerRadius(cornerRadius)
        }
        .disabled(isDisabled)
    }
}

// 进阶使用示例
struct ContentView: View {
    @State private var isSubmitDisabled = true
    
    var body: some View {
        VStack(spacing: 16) {
            // 带图标的保存按钮
            ReusableButton(title: "保存", action: {
                print("保存数据")
            }, icon: Image(systemName: "square.and.arrow.down"))
            
            // 自定义样式的删除按钮
            ReusableButton(title: "删除", action: {
                print("执行删除")
            }, backgroundColor: .red, cornerRadius: 12)
            
            // 禁用状态的提交按钮
            ReusableButton(title: "提交", action: {
                print("提交数据")
            }, isDisabled: isSubmitDisabled)
        }
        .padding()
    }
}

3. 样式封装：统一管理设计规范 #

如果项目有明确的设计系统，把常用按钮样式封装成枚举，避免重复传参，同时保证全局风格一致：

// 定义按钮样式枚举
enum ButtonStyleType {
    case primary // 主操作按钮
    case secondary // 次要操作按钮
    case destructive // 危险操作按钮
    
    var backgroundColor: Color {
        switch self {
        case .primary: return .blue
        case .secondary: return .gray
        case .destructive: return .red
        }
    }
    
    var foregroundColor: Color {
        switch self {
        case .primary, .destructive: return .white
        case .secondary: return .black
        }
    }
    
    var cornerRadius: CGFloat { 8 }
}

// 更新组件支持样式枚举
struct ReusableButton: View {
    let title: String
    let action: () -> Void
    var style: ButtonStyleType = .primary
    var isDisabled: Bool = false
    var icon: Image? = nil
    
    var body: some View {
        Button(action: action) {
            HStack(spacing: 8) {
                icon?.foregroundColor(style.foregroundColor)
                Text(title)
                    .font(.headline)
                    .foregroundColor(style.foregroundColor)
            }
            .padding()
            .frame(maxWidth: .infinity)
            .background(isDisabled ? style.backgroundColor.opacity(0.5) : style.backgroundColor)
            .cornerRadius(style.cornerRadius)
        }
        .disabled(isDisabled)
    }
}

// 样式枚举使用示例
struct ContentView: View {
    var body: some View {
        VStack(spacing: 16) {
            ReusableButton(title: "确认", action: {}, style: .primary)
            ReusableButton(title: "取消", action: {}, style: .secondary)
            ReusableButton(title: "删除", action: {}, style: .destructive)
        }
        .padding()
    }
}

4. 回调增强：兼容异步操作 #

如果按钮需要处理网络请求这类异步任务，无需修改组件结构，直接在回调中使用Task即可，组件本身天然支持同步/异步操作：

ReusableButton(title: "上传文件") {
    Task {
        do {
            try await uploadFile()
            print("上传成功")
        } catch {
            print("上传失败：\(error.localizedDescription)")
        }
    }
}

5. 核心最佳实践总结 #

• API简洁优先：给可选参数设置合理默认值，让基础场景无需传过多参数
• 单一职责：按钮只负责渲染和触发回调，业务逻辑完全交给调用方处理
• 样式统一管理：通过枚举或主题结构体维护全局样式，避免视觉不一致
• 状态全覆盖：处理禁用、加载（可扩展isLoading参数显示加载指示器）等状态
• 类型安全：用枚举代替零散的颜色、圆角参数，减少人为出错概率

内容的提问来源于stack exchange，提问作者Huntare