SwiftUI：将 ClearButton 添加到 TextField

Question

I am trying to add a ClearButton to TextField in SwiftUI when the particular TextField is selected.

我得到的最接近的是创建一个ClearButton ViewModifier并将其添加到TextFieldusing.modifer()

唯一的问题是ClearButton永久性的，TextField取消选择时不会消失

TextField("Some Text" , text: $someBinding).modifier(ClearButton(text: $someBinding))

struct ClearButton: ViewModifier {
    @Binding var text: String

    public func body(content: Content) -> some View {
        HStack {
            content
            Button(action: {
                self.text = ""
            }) {
                Image(systemName: "multiply.circle.fill")
                    .foregroundColor(.secondary)
            }
        }
    }
}

Answer 1

使用ZStack到的位置清除按钮出现内部TextField。

TextField("Some Text" , text: $someBinding).modifier(ClearButton(text: $someBinding))

struct ClearButton: ViewModifier
{
    @Binding var text: String

    public func body(content: Content) -> some View
    {
        ZStack(alignment: .trailing)
        {
            content

            if !text.isEmpty
            {
                Button(action:
                {
                    self.text = ""
                })
                {
                    Image(systemName: "delete.left")
                        .foregroundColor(Color(UIColor.opaqueSeparator))
                }
                .padding(.trailing, 8)
            }
        }
    }
}

Answer 2

使用.appearance()激活按钮

var body: some View {
    UITextField.appearance().clearButtonMode = .whileEditing
    return TextField(...)
}

为了重用，请尝试：

func TextFieldUIKit(text: Binding<String>) -> some View{
    UITextField.appearance().clearButtonMode = .whileEditing
    return TextField("Nombre", text: text)
}

Answer 3

public struct ClearButton: ViewModifier {
    @Binding var text: String

    public init(text: Binding<String>) {
        self._text = text
    }

    public func body(content: Content) -> some View {
        HStack {
            content
            Spacer()
            // onTapGesture is better than a Button here when adding to a form
            Image(systemName: "multiply.circle.fill")
                .foregroundColor(.secondary) 
                .opacity(text == "" ? 0 : 1)
                .onTapGesture { self.text = "" }
        }
    }
}

用法：

@State private var name: String

...

Form {
    Section() {
        TextField("NAME", text: $name).modifier(ClearButton(text: $name))
    }
}

Answer 4

我从@NigelGee的“Hacking with Swift”中找到了这个答案。

.onAppear {
    UITextField.appearance().clearButtonMode = .whileEditing
}

这确实帮助了我。

Answer 5

您可以Binding在您的modifier：

@Binding var visible: Bool

然后将其绑定到按钮的不透明度：

.opacity(visible ? 1 : 0)

然后添加另一个State进行检查textField：

@State var showClearButton = true

最后更新文本字段：

TextField("Some Text", text: $someBinding, onEditingChanged: { editing in
    self.showClearButton = editing
}, onCommit: {
    self.showClearButton = false
})
.modifier( ClearButton(text: $someBinding, visible: $showClearButton))

Answer 6

不完全是您正在寻找的内容，但这将让您根据内容显示/隐藏按钮text：

HStack {
    if !text.isEmpty {
        Button(action: {
            self.text = ""
        }) {
            Image(systemName: "multiply.circle")
        }
    }
}