如何在macOS中实现功能完备的可自定义TextField边框？

我正在开发一款同时适配iOS和macOS的应用。这段TextField代码在iOS上运行正常，但在macOS中存在问题：

TextField("Price", text: $priceText)
    .focused($priceFocus)
    .labelsHidden()
    .padding(3)
    .overlay(
        RoundedRectangle(cornerRadius: 4)
            .stroke(.gray, lineWidth: 1)
    )

在macOS中，若点击TextField文本后的空白区域，控件无响应，必须点击现有文本才能编辑；空TextField几乎无法输入，只能点击开头极小区域。该bug与.overlay相关。

使用RoundedBorderTextFieldStyle时功能正常，但默认样式过于暗淡，不符合需求。我已向苹果提交反馈FB12873287，确认这是macOS 13和14的系统bug。

尝试自定义TextFieldStyle，只要包含RoundedRectangle就会出现相同bug：

struct FormFieldBorderStyle: TextFieldStyle {
    func _body(configuration: TextField<Self._Label>) -> some View {
        configuration
            .padding(3)
            .cornerRadius(4)
            .overlay(
                RoundedRectangle(cornerRadius: 4)
                    .stroke(.gray, lineWidth: 1))
    }
}

同时，TextField的.border修饰符在macOS SwiftUI中也存在上述相同bug。现咨询：

• 能否自定义RoundedBorderTextFieldStyle使其更醒目？
• 能否不使用.overlay为TextField添加圆角矩形边框？

一、自定义RoundedBorderTextFieldStyle使其更醒目 #

可以基于系统原生的RoundedBorderTextFieldStyle进行包装，叠加自定义样式增强视觉效果，同时避开点击区域的bug：

struct CustomRoundedBorderTextFieldStyle: TextFieldStyle {
    let borderColor: Color = .gray
    let borderWidth: CGFloat = 1
    
    func _body(configuration: TextField<Self._Label>) -> some View {
        configuration
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .overlay(
                // 仅在编辑或有文本时显示醒目边框，避免干扰系统原生点击区域
                RoundedRectangle(cornerRadius: 4)
                    .stroke(borderColor, lineWidth: borderWidth)
                    .opacity(configuration.isEditing || !configuration.text.isEmpty ? 1 : 0)
            )
    }
}

// 使用示例
TextField("Price", text: $priceText)
    .focused($priceFocus)
    .labelsHidden()
    .textFieldStyle(CustomRoundedBorderTextFieldStyle())

这种方式借助系统原生样式保证点击交互正常，仅在需要时叠加更醒目的边框，兼顾样式需求与功能完整性。

二、不使用.overlay添加圆角矩形边框的方法 #

1. 利用background修饰符替代 #

将圆角边框作为TextField的背景层绘制，不会影响控件的点击交互区域：

TextField("Price", text: $priceText)
    .focused($priceFocus)
    .labelsHidden()
    .padding(3)
    .background(
        RoundedRectangle(cornerRadius: 4)
            .stroke(.gray, lineWidth: 1)
    )

注意：需调整padding值，确保文本与边框保持合适间距，同时保证点击区域完全覆盖边框内部范围。

2. 用ZStack分离边框与TextField #

将边框作为独立的背景视图，TextField悬浮在上方，彻底规避叠加层带来的交互问题：

ZStack {
    RoundedRectangle(cornerRadius: 4)
        .stroke(.gray, lineWidth: 1)
        .frame(height: 28) // 手动匹配TextField的默认高度
    TextField("Price", text: $priceText)
        .focused($priceFocus)
        .labelsHidden()
        .padding(3)
}

这种方式明确区分了背景边框与可交互的TextField，确保点击区域完全对应控件的可编辑范围。

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