自定义TextField默认样式遇报错：如何按需添加frame宽度？

原代码核心问题 #

1. 错误使用@State：icon和framesize是样式的外部配置参数，不属于样式内部的状态管理，无需用@State修饰，直接用普通变量即可。
2. 动态修饰符写法错误：SwiftUI的链式修饰符中不能直接插入if语句，需通过条件判断逻辑动态添加修饰符。

修正后的完整实现 #

方案一：通用条件修饰符扩展（复用性强）

先实现一个通用的视图条件修饰符扩展，方便后续在任意视图上复用逻辑：

extension View {
    @ViewBuilder
    func applyIf<Content: View>(_ condition: Bool, transform: (Self) -> Content) -> some View {
        if condition {
            transform(self)
        } else {
            self
        }
    }
}

再修正MaxTextFieldStyle：

struct MaxTextFieldStyle: TextFieldStyle {
    // 改为普通配置参数，同时将framesize改为CGFloat（匹配frame的参数类型）
    var icon: Image?
    var framesize: CGFloat = 0
    
    func _body(configuration: TextField<Self._Label>) -> some View {
        HStack {
            // 可选绑定简化写法
            icon?
                .foregroundColor(Color(UIColor.systemGray4))
            configuration
        }
        .padding()
        .overlay {
            RoundedRectangle(cornerRadius: 8, style: .continuous)
                .stroke(Color(UIColor.systemGray4), lineWidth: 2)
        }
        // 动态添加frame修饰符
        .applyIf(framesize > 0) {
            $0.frame(width: framesize)
        }
        .frame(maxWidth: .infinity, alignment: .trailing)
        .keyboardType(.decimalPad)
    }
}

方案二：无扩展的直接写法

如果不想额外编写扩展，可将视图赋值给变量后再动态添加修饰符：

struct MaxTextFieldStyle: TextFieldStyle {
    var icon: Image?
    var framesize: CGFloat = 0
    
    func _body(configuration: TextField<Self._Label>) -> some View {
        // 构建基础视图
        let baseView = HStack {
            icon?
                .foregroundColor(Color(UIColor.systemGray4))
            configuration
        }
        .padding()
        .overlay {
            RoundedRectangle(cornerRadius: 8, style: .continuous)
                .stroke(Color(UIColor.systemGray4), lineWidth: 2)
        }
        
        // 根据条件添加frame修饰符
        let configuredView = framesize > 0 ? baseView.frame(width: framesize) : baseView
        
        return configuredView
            .frame(maxWidth: .infinity, alignment: .trailing)
            .keyboardType(.decimalPad)
    }
}

使用示例 #

@State private var inputText = ""

TextField("请输入内容", text: $inputText)
    .textFieldStyle(MaxTextFieldStyle(icon: Image(systemName: "dollarsign"), framesize: 200))

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