Question

当尝试选择特定的TextField时，我试图在SwiftUI中的TextField中添加一个ClearButton。

我最近得到的是创建一个ClearButton ViewModifier，然后使用TextField将其添加到.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

使用.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 2

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 3

使用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 4

您可以在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 5

并不是您要查找的内容，但这将使您根据text的内容显示/隐藏按钮：

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

SwiftUI：将ClearButton添加到TextField

5 个答案: