自定义TextField的Trim功能异常、聚焦状态重置及浮动标签裁切边框问题求助

嘿，我来帮你梳理并解决这两个问题～

一、不同占位符的裁切适配异常问题 #

你遇到的“trim效果对不同占位符不一致”，大概率是因为用@State存储labelWidth的方式存在局限——这个值只会在视图初始化时计算一次，当占位符文本长度变化（比如从“Name”到“Enter name”），或者文本内容变化导致标签位置、尺寸改变时，labelWidth不会自动更新，自然裁切的宽度就匹配不上了。

给你两个实用的调整思路：

• 用GeometryReader实时获取标签宽度：给占位符Text添加一个背景用的GeometryReader，实时读取它的尺寸并更新labelWidth，确保占位符变化时宽度能同步更新。示例代码：

Text(placeholder)
    .foregroundStyle(text.isEmpty ? .gray : .blue) // 补全你截断的样式逻辑
    .background(GeometryReader { proxy in
        Color.clear
            .onAppear {
                labelWidth = proxy.size.width
            }
            .onChange(of: placeholder) { _ in
                labelWidth = proxy.size.width
            }
            .onChange(of: text) { _ in
                // 文本变化时标签位置/尺寸可能改变，重新计算
                labelWidth = proxy.size.width
            }
    })

• 优化边框裁切的实现逻辑：不要依赖固定宽度值去裁切，改用overlay结合mask的方式实现“标签切进边框”的效果。先绘制完整的圆角边框，再在标签对应的位置用TextField的背景色覆盖边框，这样不管标签多长，都能精准适配裁切。

二、第一次输入时FocusState变为false的问题 #

这个问题基本是视图重建导致的状态重置：当你第一次输入文本时，绑定的text值发生变化，触发RoundedTextField的body重新计算，而@FocusState是视图级别的状态，视图重建时会被重置为初始的false值，导致焦点丢失。

可以试试这几个解决办法：

• 用@Namespace稳定视图身份：给TextField和浮动标签添加同一个Namespace，让SwiftUI识别出这是同一个视图，避免不必要的重建。示例：

@Namespace private var textFieldNamespace

// 在body的ZStack中：
TextField("", text: $text)
    .focused($isFieldFocused)
    .matchedGeometryEffect(id: "textFieldElement", in: textFieldNamespace)

Text(placeholder)
    // 其他样式
    .matchedGeometryEffect(id: "textFieldElement", in: textFieldNamespace)

• 手动维持焦点状态：监听text的变化，在第一次输入时，如果之前处于聚焦状态，就手动把isFieldFocused设回true：

.onChange(of: text) { newValue in
    if !newValue.isEmpty && !isFieldFocused {
        isFieldFocused = true
    }
}

• 检查视图层级：确保TextField在ZStack中处于最上层，避免被其他视图遮挡导致系统判定焦点丢失。

另外，你代码里的Text(placeholder)的foregroundStyle部分被截断了，记得补全完整的样式逻辑（比如聚焦状态、文本非空状态下的颜色），这也可能影响视图的状态更新逻辑哦～

备注：内容来源于stack exchange，提问作者sinaar