SwiftUI中如何修改SecureField字体颜色并实现自定义样式？

嘿，我来帮你搞定这个需求！要给SecureField实现和你现有CustomTextField一样的样式，还能自定义字体颜色，其实很简单，咱们分两种实用方式来做，你可以选适合自己的：

方式一：直接新建CustomSecureField组件 #

复用你原来CustomTextField的占位符逻辑，新增字体颜色参数来控制输入文本的颜色，代码如下：

struct CustomSecureField: View {
    var placeholder: Text
    @Binding var text: String
    var textColor: Color // 新增：控制输入文本的颜色
    var editingChanged: (Bool)->() = { _ in }
    var commit: ()->() = { }
    
    var body: some View {
        ZStack(alignment: .leading) {
            // 保持原有的占位符逻辑
            if text.isEmpty {
                placeholder
            }
            // 替换为SecureField，并应用自定义字体颜色
            SecureField("", text: $text, onEditingChanged: editingChanged, onCommit: commit)
                .foregroundColor(textColor)
        }
    }
}

调用示例 #

和你原来调用CustomTextField的方式几乎一致，只需要传入你想要的字体颜色：

@State private var password = ""

CustomSecureField(
    placeholder: Text("Password").foregroundColor(.white), // 占位符颜色还是按原来的方式设置
    text: $password,
    textColor: .yellow // 这里改成你需要的字体颜色，比如黄色
)
.background(Color(red: 0/255, green: 174/255, blue: 180/255))
.opacity(0.5)
.cornerRadius(29)
.frame(height: 50)
.font(.system(size: 40))

方式二：重构为通用输入组件（更优雅） #

如果不想维护两个相似的组件，可以把原来的CustomTextField改成支持普通/安全输入的通用组件，复用所有逻辑：

// 定义输入类型枚举
enum InputType {
    case normal
    case secure
}

struct CustomInputField: View {
    var placeholder: Text
    @Binding var text: String
    var inputType: InputType // 控制是普通输入还是密码输入
    var textColor: Color // 输入文本颜色
    var editingChanged: (Bool)->() = { _ in }
    var commit: ()->() = { }
    
    var body: some View {
        ZStack(alignment: .leading) {
            if text.isEmpty {
                placeholder
            }
            
            // 根据输入类型渲染对应的输入框
            switch inputType {
            case .normal:
                TextField("", text: $text, onEditingChanged: editingChanged, onCommit: commit)
                    .foregroundColor(textColor)
            case .secure:
                SecureField("", text: $text, onEditingChanged: editingChanged, onCommit: commit)
                    .foregroundColor(textColor)
            }
        }
    }
}

调用示例 #

• 普通输入框：

CustomInputField(
    placeholder: Text("Login").foregroundColor(.white),
    text: $login,
    inputType: .normal,
    textColor: .white
)
// 后面的样式和你原来的代码完全一致
.background(Color(red: 0/255, green: 174/255, blue: 180/255))
.opacity(0.5)
.cornerRadius(29)
.frame(height: 50)
.font(.system(size: 40))

• 密码输入框：

CustomInputField(
    placeholder: Text("Password").foregroundColor(.white),
    text: $password,
    inputType: .secure,
    textColor: .yellow
)
// 样式和普通输入框保持一致
.background(Color(red: 0/255, green: 174/255, blue: 180/255))
.opacity(0.5)
.cornerRadius(29)
.frame(height: 50)
.font(.system(size: 40))

这样不管是普通输入还是密码输入，都能复用相同的样式逻辑，还能灵活控制输入文本的颜色～

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