[英]How to make an "Edit" button for a textField in SwiftUI?
我有一些已经完成的文本字段,我想添加一些“编辑”按钮,这些按钮将向我按下的那个显示键盘。 这是文本字段之一的代码:
Image(colorScheme == .light ? "user" : "userDark").resizable().frame(width: 30, height: 30)
TextField("Name", text: $name).textFieldStyle(PlainTextFieldStyle()).padding(.leading, 5).font(.system(size: 20))
.autocapitalization(.words)
.disableAutocorrection(true)
if name != localName {
Button(action: {
self.name = ""
}) {
Text("Update").font(.system(size: 15)).fontWeight(.light)
.foregroundColor(colorScheme == .light ? Color.black : Color.white)
}
} else if name == localName {
Text("Edit").font(.system(size: 15)).fontWeight(.light)
.foregroundColor(colorScheme == .light ? Color.black : Color.white)
}
如果您想为每个不同的属性启用自定义 editMode,这非常容易。 在这里,我只为姓名字段创建自定义编辑模式,您只需为其他字段创建编辑模式,例如您在上图中提供的联系号码。 首先为每个字段创建一个 editMode 属性,例如:
@State var nameInEditMode = false
@State var name = "Mr. Foo Bar"
那么你的每个字段应该是这样的:
HStack {
Image(systemName: "person.circle").resizable().frame(width: 30, height: 30)
if nameInEditMode {
TextField("Name", text: $name).textFieldStyle(RoundedBorderTextFieldStyle()).padding(.leading, 5).font(.system(size: 20))
.autocapitalization(.words)
.disableAutocorrection(true)
} else {
Text(name).font(.system(size: 20))
}
Button(action: {
self.nameInEditMode.toggle()
}) {
Text(nameInEditMode ? "Done" : "Edit").font(.system(size: 20)).fontWeight(.light)
.foregroundColor(Color.blue)
}
}
对于测试,只需复制、粘贴并运行上面的代码,然后就会发现它很棒。
自定义UIViewRepresentable
可以实现此功能。
此代码将从UITextField
创建自定义TextField
并允许您更改font
和autocapitalizationType
等参数。
struct CustomTextField: UIViewRepresentable {
class Coordinator: NSObject, UITextFieldDelegate {
@Binding var text: String
@Binding var isEditing: Bool
var didBecomeFirstResponder = false
init(text: Binding<String>, editing: Binding<Bool>) {
_text = text
_isEditing = editing
}
func textFieldDidChangeSelection(_ textField: UITextField) {
text = textField.text ?? ""
}
func textFieldDidBeginEditing(_ textField: UITextField) {
isEditing = true
}
func textFieldDidEndEditing(_ textField: UITextField) {
isEditing = false
}
}
var placeholder = ""
@Binding var text: String
@Binding var isEditing: Bool
var isFirstResponder: Bool = false
var font = UIFont.systemFont(ofSize: 20)
var autocapitalization = UITextAutocapitalizationType.none
var autocorrection = UITextAutocorrectionType.default
var borderStyle = UITextField.BorderStyle.none
func makeUIView(context: UIViewRepresentableContext<CustomTextField>) -> UITextField {
let textField = UITextField(frame: .zero)
textField.delegate = context.coordinator
textField.placeholder = placeholder
textField.font = font
textField.autocapitalizationType = autocapitalization
textField.autocorrectionType = autocorrection
textField.borderStyle = borderStyle
return textField
}
func makeCoordinator() -> CustomTextField.Coordinator {
return Coordinator(text: $text, editing: $isEditing)
}
func updateUIView(_ uiView: UITextField, context: UIViewRepresentableContext<CustomTextField>) {
uiView.text = text
if isFirstResponder && !context.coordinator.didBecomeFirstResponder {
uiView.becomeFirstResponder()
context.coordinator.didBecomeFirstResponder = true
} else if !isFirstResponder && context.coordinator.didBecomeFirstResponder {
uiView.resignFirstResponder()
context.coordinator.didBecomeFirstResponder = false
}
}
}
信用:此代码是从@MatteoPacini here对类似问题的回答中修改而来的。
我假设PlainTextFieldStyle()
等效于UITextField.BorderStyle.none
。
因此,在您的View
,要让“编辑” Button
出键盘并更改为“完成”以降低键盘,您的代码将是:
Image(colorScheme == .light ? "user" : "userDark")
.resizable()
.frame(width: 30, height: 30)
CustomTextField(
placeholder: "Name",
text: $name,
isEditing: $isEditing,
isFirstResponder: isEditing,
font: .systemFont(ofSize: 20),
autocapitalization: .words,
autocorrection: .no,
borderStyle: .none
)
.padding(.leading, 5)
if name != localName {
Button(action: {
self.name = ""
}) {
Text("Update")
.font(.system(size: 15))
.fontWeight(.light)
.foregroundColor(colorScheme == .light ? Color.black : Color.white)
}
} else if name == localName {
Button(action: {
self.isEditing.toggle()
}) {
Text(self.isEditing ? "Cancel" : "Edit")
.font(.system(size: 15))
.fontWeight(.light)
.foregroundColor(colorScheme == .light ? Color.black : Color.white)
}
}
使用Bool
指示TextField
是否正在编辑:
@State var isEditing = false
如果您提供的代码定义了List
或Form
的单元格,您可以将其替换为编辑单元格的IndexSet
或Optional<IndexPath>
。
此外,如果您不想要“完成”按钮,只需将Button
更改为:
Button(action: {
self.isEditing = true
}) {
Text("Edit")
.font(.system(size: 15))
.fontWeight(.light)
.foregroundColor(colorScheme == .light ? Color.black : Color.white)
}
在 Xcode-beta-2 的 Swift Playground 上测试
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.