SwiftUI视图中近乎相同的条件代码重构方法

针对你遇到的代码冗余问题，我们可以通过@ViewBuilder提取差异化部分，保留公共布局逻辑，完美解决重复代码问题，同时避开泛型关联类型的陷阱。

原代码问题分析 #

你的原始代码大概类似这样，if/else块中仅输入组件（SecureField/TextField）和图标存在差异，其余布局逻辑完全重复：

struct APITokenInputView: View {
    @Binding var token: String
    @State private var isSecure = true
    
    var body: some View {
        HStack {
            if isSecure {
                SecureField("API Token", text: $token)
                    .padding()
                    .border(Color.gray)
                Button(action: { isSecure.toggle() }) {
                    Image(systemName: "eye.slash")
                }
            } else {
                TextField("API Token", text: $token)
                    .padding()
                    .border(Color.gray)
                Button(action: { isSecure.toggle() }) {
                    Image(systemName: "eye")
                }
            }
        }
    }
}

重构方案：用@ViewBuilder抽离差异化视图 #

利用SwiftUI的@ViewBuilder特性，我们可以将输入组件的差异化逻辑单独封装，公共布局逻辑只写一次：

struct APITokenInputView: View {
    @Binding var token: String
    @State private var isSecure = true
    
    var body: some View {
        HStack {
            // 公共布局：padding、border等只写一次
            inputField
                .padding()
                .border(Color.gray)
            
            // 按钮逻辑统一：根据isSecure状态切换图标
            Button(action: { isSecure.toggle() }) {
                Image(systemName: isSecure ? "eye.slash" : "eye")
            }
        }
    }
    
    // 用@ViewBuilder封装差异化的输入组件
    @ViewBuilder
    private var inputField: some View {
        if isSecure {
            SecureField("API Token", text: $token)
        } else {
            TextField("API Token", text: $token)
        }
    }
}

进阶：封装成通用可复用组件 #

如果后续还有类似的可切换输入需求，可以进一步封装成通用组件，提升复用性：

// 通用可切换显示/隐藏的输入框组件
struct SecureToggleInputView: View {
    let placeholder: String
    @Binding var text: String
    @State private var isSecure = true
    
    var body: some View {
        HStack {
            inputField
                .padding()
                .border(Color.gray)
            
            Button(action: { isSecure.toggle() }) {
                Image(systemName: isSecure ? "eye.slash" : "eye")
            }
            .foregroundColor(.gray)
        }
    }
    
    @ViewBuilder
    private var inputField: some View {
        if isSecure {
            SecureField(placeholder, text: $text)
        } else {
            TextField(placeholder, text: $text)
        }
    }
}

// 使用示例：API令牌输入框
struct APITokenInputView: View {
    @Binding var token: String
    
    var body: some View {
        SecureToggleInputView(placeholder: "API Token", text: $token)
    }
}

为什么这个方案避开了泛型关联类型问题 #

你之前尝试泛型时遇到的关联类型问题，本质是因为TextField和SecureField是不同的具体类型，泛型无法直接约束为统一的View类型（需要处理类型擦除）。而@ViewBuilder是SwiftUI内置的语法糖，它会自动处理不同视图类型的类型擦除，让我们可以在同一个属性中返回不同的View实例，无需手动处理复杂的泛型约束。

类比Web开发思路 #

这和你熟悉的Web开发逻辑类似：就像在JavaScript/React中，把公共的容器样式、交互逻辑抽离，只在条件分支中渲染不同的输入组件，避免重复编写相同的布局代码。

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