问题描述
想象一下,我有 6 个 TextFields 排列在一个 3 列 2 行的网格中。我们将通过它们在此网格中的 X、Y 位置来引用它们,从左上角 TextField 的 1,1 和右下角的 3,2 开始。
当我运行这个程序时,我将光标放在 TextField 1,1 中并输入一个值。我点击 Tab 键,光标转到 2,1;然后到 3,1;然后到 1,2;然后 2,2;最后到 3,2。
光标在第一行水平移动,然后是第二行,依此类推。
不过,我需要更改该顺序。
我需要它沿着第 1 列前进,然后移动到第 2 列,然后进入第 3 列。
在 Cocoa 编程中,您可以使用 nextkeyview 指定顺序。
SwiftUI 中是否有类似的东西?
我希望我可以像下面那样将它们分组到 vstack 中并获得我想要的行为,但它不起作用。我也尝试将列对放在 Group{...}
中,但它不起作用。
struct ContentView: View {
@State private var oneone = ""
@State private var onetwo = ""
@State private var twoone = ""
@State private var twotwo = ""
@State private var threeone = ""
@State private var threetwo = ""
var body: some View {
HStack {
vstack {
TextField("1,1",text: $oneone)
TextField("1,2",text: $onetwo)
}
vstack {
TextField("2,text: $twoone)
TextField("2,text: $twotwo)
}
vstack {
TextField("3,text: $threeone)
TextField("3,text: $threetwo)
}
}
}
}
解决方法
SwiftUI 尚未内置此功能,但 Swift 内置了。要在 SwiftUI 中执行此操作,请创建一个符合 UIViewRepresentable 的自定义文本字段,以在文本字段中使用 becomeFirstResponder 功能。这是我在项目中的做法。这个例子有几个你可能不需要的可选变量。随意调整它以适合您。
struct CustomTextField: UIViewRepresentable
{
@Binding var text: String
@Binding var selectedField: Int
@Binding var secure: Bool // Optional
var placeholder: String = ""
var tag: Int
var keyboardType: UIKeyboardType = .asciiCapable // Optional
var returnKey: UIReturnKeyType = .next // Optional
var correctionType: UITextAutocorrectionType = .default // Optional
var capitalizationType: UITextAutocapitalizationType = .sentences // Optional
func makeUIView(context: UIViewRepresentableContext<CustomTextField>) -> UITextField
{
let textField = UITextField(frame: .zero)
textField.delegate = context.coordinator
textField.keyboardType = keyboardType
textField.returnKeyType = returnKey
textField.autocorrectionType = correctionType
textField.autocapitalizationType = capitalizationType
textField.tag = tag
textField.isSecureTextEntry = secure
textField.placeholder = placeholder
return textField
}
func makeCoordinator() -> CustomTextField.Coordinator
{
return Coordinator(text: $text,secure: $secure)
}
func updateUIView(_ uiView: UITextField,context: UIViewRepresentableContext<CustomTextField>)
{
uiView.text = text
uiView.isSecureTextEntry = secure
context.coordinator.newSelection = { newSelection in
DispatchQueue.main.async {
self.selectedField = newSelection
}
}
if uiView.tag == self.selectedField
{
uiView.becomeFirstResponder()
}
}
class Coordinator: NSObject,UITextFieldDelegate
{
@Binding var text: String
@Binding var secure: Bool
var newSelection: (Int) -> () = { _ in }
init(text: Binding<String>,secure: Binding<Bool>)
{
_text = text
_secure = secure
}
func textFieldDidChangeSelection(_ textField: UITextField)
{
DispatchQueue.main.async {
self.text = textField.text ?? ""
}
}
func textFieldDidBeginEditing(_ textField: UITextField)
{
self.newSelection(textField.tag)
}
func textFieldShouldReturn(_ textField: UITextField) -> Bool
{
if textField.returnKeyType == .done
{
textField.resignFirstResponder()
}
else
{
self.newSelection(textField.tag + 1)
}
return true
}
}
}
然后,在带有文本字段的视图中,为每个字段分配不同的标签,指示所需的顺序。
struct ContentView: View {
@State private var oneOne = ""
@State private var oneTwo = ""
@State private var twoOne = ""
@State private var twoTwo = ""
@State private var threeOne = ""
@State private var threeTwo = ""
@State private var selectedField: Int = 0
@State private var fieldsSecure: Bool = false
var body: some View {
HStack {
VStack {
CustomTextField(
text: $oneOne,selectedField: $selectedField,secure: $fieldsSecure,placeholder: "1,1",tag: 1,keyboardType: .asciiCapable,returnKey: .done,correctionType: .yes,capitalizationType: .words)
CustomTextField(
text: $oneTwo,2",tag: 4,capitalizationType: .words)
}
VStack {
CustomTextField(
text: $twoOne,placeholder: "2,tag: 2,capitalizationType: .words)
CustomTextField(
text: $twoTwo,tag: 5,capitalizationType: .words)
}
VStack {
CustomTextField(
text: $threeOne,placeholder: "3,tag: 3,capitalizationType: .words)
CustomTextField(
text: $threeTwo,tag: 6,capitalizationType: .words)
}
}
}