SwiftUI：将ClearButton添加到文本字段

当选中特定的TextField时，我正在尝试向SwiftUI中的TextField添加ClearButton

我得到的最接近的结果是创建了一个

ClearButton

ViewModifier

，并使用

.modifier（）

唯一的问题是

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

---

您可以在

修改器中添加另一个
绑定
：

@Binding var visible: Bool

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

.opacity(visible ? 1 : 0)

然后添加另一个
状态
以检查
文本字段
：

@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))

不完全是您要查找的内容，但这将允许您根据
文本
内容显示/隐藏按钮：

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

使用
ZStack
定位出现在
文本字段中的清除按钮

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

公共结构ClearButton:ViewModifier{
@绑定变量文本：字符串
公共初始化（文本：绑定）{
self.\u text=文本
}
公共函数体（内容：content）->一些视图{
HStack{
内容
垫片（）
//添加到表单时，OnTap手势优于此处的按钮
图像（系统名称：“乘法。圆。填充”）
.foregroundColor（.secondary）
.不透明度（文本=“”？0:1）
.ONTAPPORATE{self.text=”“}
}
}
}


用法：

@State private var name:String
...
形式{
第（）节{
TextField（“NAME”，text:$NAME）.modifier（ClearButton（text:$NAME））
}
}
使用
外观（）
激活按钮

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

func TextFieldUIKit（文本：绑定）->一些视图{
UITextField.appearance（）.clearButtonMode=.WhileEdit
返回文本字段（“Nombre”，text:text）
}
谢谢！我正在使用多个
文本字段
作为
表单的一部分
，是否有一种解决方案不涉及为每个
文本字段
创建showClearButton
@状态
？是，为您的自定义
文本字段创建自定义
视图
。您为什么不接受我的答案？@MojtabaHosseini我猜是因为接受的答案是对Cam现有代码的修改。它似乎也更健壮，基于数据源本身进行更新，而不是跟踪新的派生状态。最好用HStack替换ZStack。否则长文本将进入图像下。它现在不工作？！唉，事实并非如此。我认为这个按钮在新的iOS版本上不再触发。我已经尝试过使用它，但是绑定值没有改变。在
ClearButton
块中，
text
的值是我第一次按下文本字段时的值。然后，它确实被清除了，但是清除的
text
值没有在TextField上设置。因此，我试图理解为什么我们需要
\u text
属性。我仍在努力理解SwiftUI，很抱歉这是显而易见的。为什么带有点击的图像更好？这对我来说很有用。我很好奇你是如何找到这个解决方案的？？与“tapperstate（）”结合使用，它无法清除文本@PeterKreinz，这是因为
TapSirtation（）
捕捉到了点击而不是清除按钮，请尝试
。同时手势（…）