SwiftUI SecureField输入首个字符时轻微尺寸变化问题求助

这种UI跳动通常是因为SecureField在空状态（显示占位符）和首次输入后（显示密码字符）的内部文本布局存在细微差异——比如系统默认的基线对齐、字体渲染或者内边距调整导致控件尺寸变化。以下是几种实用的修复方案：

1. 固定控件的明确尺寸 #

直接给SecureField设置固定的宽高约束，强制控件尺寸不随内部内容变化而改变，这是最直接的解决方法：

@State private var password = ""

var body: some View {
    SecureField("请输入密码", text: $password)
        .frame(height: 44) // 固定高度，彻底避免垂直方向跳动
        .padding(.horizontal, 16)
        .background(Color.gray.opacity(0.1))
        .cornerRadius(8)
}

2. 统一占位符与输入文本的样式 #

确保占位符和输入密码的字体、行高、对齐方式完全一致，消除样式差异带来的布局偏移：

• iOS 17及以上可以直接用placeholderStyle统一样式：

SecureField("请输入密码", text: $password)
    .font(.system(size: 16, weight: .regular))
    .lineHeight(22)
    .foregroundColor(.black)
    .placeholderStyle(.init(color: .gray)) // 同步占位符颜色
    .frame(height: 44)
    .padding(.horizontal, 16)
    .background(Color.gray.opacity(0.1))
    .cornerRadius(8)

• iOS 16及以下可以用ZStack自定义占位符，保证两者布局完全重叠：

ZStack(alignment: .leading) {
    // 自定义占位符，样式和输入文本完全一致
    if password.isEmpty {
        Text("请输入密码")
            .font(.system(size: 16))
            .foregroundColor(.gray)
            .padding(.horizontal, 16)
    }
    // 空占位符的SecureField，避免系统默认占位符的样式差异
    SecureField("", text: $password)
        .font(.system(size: 16))
        .foregroundColor(.black)
        .padding(.horizontal, 16)
}
.frame(height: 44)
.background(Color.gray.opacity(0.1))
.cornerRadius(8)

3. 禁用系统文本调整功能 #

关闭自动更正、自动大写等可能影响文本布局的系统选项：

SecureField("请输入密码", text: $password)
    .autocorrectionDisabled()
    .textInputAutocapitalization(.never)
    .frame(height: 44)
    .padding(.horizontal, 16)
    .background(Color.gray.opacity(0.1))
    .cornerRadius(8)

4. 使用fixedSize约束文本尺寸 #

通过fixedSize限制文本的渲染尺寸，避免内容变化时拉伸控件：

SecureField("请输入密码", text: $password)
    .fixedSize(horizontal: false, vertical: true)
    .frame(height: 44)
    .padding(.horizontal, 16)
    .background(Color.gray.opacity(0.1))
    .cornerRadius(8)

总结 #

优先尝试固定控件高度+统一占位符与输入文本样式的组合方案，这几乎能解决所有场景下的SecureField尺寸跳动问题。

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