SwiftUI TextField字符超限提示优化：达标后自动隐藏

问题描述 #

我有一个限制150字符的TextField，用户提交更新时若字符超限，下方文本块会显示提示需缩短的字符数（如“请缩短文本3个字符”）。希望实现当用户删除字符至符合限制（剩余字符数≥0）时，该提示文本自动隐藏，但目前代码仅在点击提交按钮时校验，输入过程中无法实时更新提示状态。

现有代码问题分析 #

1. isUserBioValid 仅在 onSubmit 回调中更新，用户输入/删除字符时不会触发，导致提示无法实时隐藏。
2. bioCharacterExceededBy() 逻辑错误：返回的是剩余字符数，当未超限时会显示负数/0，不符合提示文案的语义（应该返回超出的字符数）。
3. 提示文本用三元运算符返回空字符串，仍会占用布局空间，不如条件渲染更合理。

修正后的完整代码 #

状态与常量定义

private let charLimit = 150
@State private var userBio: String = ""
@State private var isUserBioValid: Bool = true
// 假设vm和bio是已定义的变量
@ObservedObject var vm: YourViewModel
let bio: String?

修正超限计算函数

func bioExceededCount() -> Int {
    // 计算超出的字符数，未超限时返回0
    let exceededCount = userBio.count - charLimit
    return max(exceededCount, 0)
}

实时校验的TextField

TextField(bio ?? "Name unavailable", text: $userBio)
    .submitLabel(.done)
    .onChange(of: userBio) { _ in
        // 每次输入变化都实时更新校验状态
        isUserBioValid = userBio.count <= charLimit
    }
    .onSubmit {
        guard isUserBioValid else { return }
        // 仅当内容有效且有变更时保存
        if vm.userModel?.userBio != userBio {
            // 执行保存逻辑
        }
    }

条件渲染的提示文本

if !isUserBioValid {
    Text("请缩短文本 \(bioExceededCount()) 个字符")
        .foregroundColor(.red)
        .font(.caption)
        .listRowSeparator(.hidden)
}

修改说明 #

• 实时监听输入：通过onChange(of: userBio)监听文本变化，每次输入都更新校验状态，删除字符到符合限制时提示会立刻隐藏。
• 修正超限计算：bioExceededCount()返回实际超出的字符数，避免出现负数提示。
• 条件渲染提示：只有当内容确实超限时才渲染提示文本，空状态下不占用布局空间。

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