如何消除SwiftUI TextFields周围的蓝色选择边框？

Question

我用如下代码创建了两个文本框：

```html

我用如下代码创建了两个文本框：

```

VStack (spacing: geometry.size.width/48) {
    TextField("World Name", text: self.$WorldName)
        .font(.system(size: geometry.size.width/28))
        .textFieldStyle(PlainTextFieldStyle())
        .frame(width: geometry.size.width*0.75)
        .background(
            RoundedRectangle(cornerRadius: 8)
                .fill(Color.init(white: 0.28))
    )
    TextField("World Seed", text: self.$WorldSeed)
        .font(.system(size: geometry.size.width/28))
        .textFieldStyle(PlainTextFieldStyle())
        .frame(width: geometry.size.width*0.75)
        .background(
            RoundedRectangle(cornerRadius: 8)
                .fill(Color.init(white: 0.28))
    )
    Button (action: {
        withAnimation {
            self.back.toggle()
        }
        // Is there a way to "deselect" any textfields here
    }){
        Text("Back")
    }
}

为什么我点击一个按钮后，会有一个蓝色的边框出现，并且边框不随动画消失，该如何移除？这个问题很具体，我已经提供了代码和必要的细节，我认为回答起来不应该太难。

简而言之，我需要知道：

- 如何去掉这个蓝色的选中边框 或者 - 如何在按钮的操作中立即取消文本字段的选择状态， - 如果我应用了填充或圆角，如何使边框正确地对齐文本字段

这张图片中唯一蓝色的就是我所说的那个边框: 正如这个截图所示，文本字段是圆形的，但是选择边框没有圆角，不能反映出条目的圆角矩形形状： 蓝色边框无法适应填充： 我像这样添加了填充：.padding([.leading, .trailing], 6)

- user12718888

---

你能提供屏幕截图吗？ - Salman500

在文本字段上选择时，由于它具有“PlainTextFieldStyle”样式，因此没有蓝色边框。 - Salman500

@Salman500 添加了屏幕截图。显示了边框。 - user12718888

@Salman500 在 macOS 上使用 PlainTextFieldSyle 时会出现蓝色边框。 - user7804781

Answer 1

您可以通过扩展NSTextField来移除蓝色边框（即使使用PlainTextFieldStyle在macOS上也会出现），如下所示：

extension NSTextField {
        open override var focusRingType: NSFocusRingType {
                get { .none }
                set { }
        }
}

查看苹果开发者论坛的回答在这里

- user7804781

---

不错。这也适用于许多其他的NS视图子类，比如NSTabView、NSButton等。 - domi852

Answer 2

我不知道你指的是哪个蓝色边框，如果你指的是textfield的蓝色边框，那么因为你已经使用了PlainTextFieldStyle，所以没有蓝色边框。

要取消选择文本字段

UIApplication.shared.windows.filter({$0.isKeyWindow}).first?.endEditing(true)

如何在具有填充的文本框中实现圆角效果

ZStack {
    Rectangle()
    .foregroundColor(.clear)
    .overlay(RoundedRectangle(cornerRadius: 6).stroke(Color("appcolor").opacity(0.5), lineWidth: 1))

    TextField("Enter some text", text: $worldName)
        .padding([.leading, .trailing], 6)
}.frame(height: 42)
    .padding([.leading, .trailing], 10)

- Salman500

---

感谢您的帮助，我很感激，但我认为任何困惑都是由于我正在为MacOS编码。当您单击文本字段时，它变为“选定状态”，并出现蓝色边框。 - user12718888

然而，也许针对iOS的代码也适用于macOS，所以我仍会查阅你的答案。 - user12718888

你找到任何解决方案了吗？ - Zeeshan Suleman

@ZeeshanSuleman 我找到了一种解决方案，可以去除macOS上的蓝色边框，请查看我在问题答案中的回答。 - user7804781