【问题标题】:How to get rid of the blue selection border around SwiftUI TextFields?如何摆脱 SwiftUI TextFields 周围的蓝色选择边框?
【发布时间】:2020-01-15 15:50:17
【问题描述】:

我使用以下代码创建了两个文本字段:


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")
    }
}

为什么我点击一个,有一个蓝色边框不随动画淡出,怎么去掉?这个问题很具体,我提供了代码和必要的细节,我不明白为什么它应该太难回答。

所以概括地说,我需要知道:

  • 如何去掉这个蓝色的选择边框

或者

  • 如何立即取消选择按钮操作中的文本字段,
  • 如果我应用填充或圆角,让边框与 TextField 正确对齐。

这张图片中唯一的蓝色是我指的边框

如此截图所示,文本字段是圆形的,但选择边框没有得到圆角以反映条目的圆角矩形形状

蓝色边框不适合填充

我添加了这样的填充 .padding([.leading, .trailing], 6)

【问题讨论】:

  • 能否提供截图
  • 哪个蓝色在文本字段上选择时没有蓝色边框,因为它具有PlainTextFieldStyle 样式
  • @Salman500 添加了截图。显示边框
  • @Salman500 在 macos 上使用 PlainTextFieldSyle 时出现蓝色边框

标签: swift macos swiftui


【解决方案1】:

您可以通过像这样扩展 NSTextField 来移除蓝色边框(即使在使用 PlainTextFieldStyle 时也会出现在 macos 上):

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

查看 Apple 开发者论坛的回答 here

【讨论】:

    【解决方案2】:

    我不知道你指的是哪个蓝色边框,如果你指的是textfield的蓝色边框,没有蓝色边框是因为你给了PlainTextFieldStyle

    取消选择文本字段

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

    有一个带有填充的圆形textfield

    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)
    

    【讨论】:

    • 感谢您的帮助,我很感激,但是我认为任何混淆都是由于我正在为 macos 编码。当您单击文本字段时,它会变为“已选中”,并且会在其周围出现蓝色边框。
    • 不过,iOS 的代码或许也适用于 macOS,所以我仍会调查您的答案
    • 你找到解决办法了吗?
    • @ZeeshanSuleman 我找到了在 macOS 上移除蓝色边框的解决方案,请参阅我对问题的回答
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-03-10
    • 1970-01-01
    • 2019-06-10
    • 1970-01-01
    • 2013-03-20
    相关资源
    最近更新 更多