Блог

Моя проблема: я хочу, чтобы пользователь мог переходить от текстового поля к текстовому полю без скачка представления, как показано в gif ниже.

Мой вариант использования: у меня есть несколько текстовых полей и текстовых редакторов в нескольких дочерних представлениях. Эти текстовые поля генерируются динамически, поэтому я хочу, чтобы состояние фокуса было отдельной проблемой.

Я сделал пример gif и пример кода ниже.

Пожалуйста, проверьте это, любые предложения приветствуются.

Как было предложено в комментариях, я внес некоторые изменения, которые не повлияли на отказ:

  - Using Identfiable does not change the bounce
 - A single observed object or multiple and a view model does not change the bounce
 

Я думаю, что это связано с обновлением изменения состояния. Если это не обновление, вызывающее отказ (как предполагает пользователь в комментариях), что это? Есть ли способ остановить этот отскок при использовании FocusState?

Для воспроизведения: создайте новый проект xcode приложения iOS и замените представление содержимого приведенным ниже текстом кода. Кажется, что представление обновляется, когда пользователь переходит от одного текстового поля к следующему текстовому полю, вызывая отскок всего экрана.

Пример кода

 import SwiftUI

struct MyObject: Identifiable, Equatable {
    var id: String
    public var value: String
    init(name: String, value: String) {
        self.id = name
        self.value = value
    }
}

struct ContentView: View {

    @State var myObjects: [MyObject] = [
        MyObject(name: "aa", value: "1"),
        MyObject(name: "bb", value: "2"),
        MyObject(name: "cc", value: "3"),
        MyObject(name: "dd", value: "4")
    ]
    @State var focus: MyObject?

    var body: some View {
        VStack {
            Text("Header")
            ForEach(self.myObjects) { obj in
                Divider()
                FocusField(displayObject: obj, focus: $focus, nextFocus: {
                    guard let index = self.myObjects.firstIndex(of: $0) else {
                        return
                    }
                    self.focus = myObjects.indices.contains(index   1) ? myObjects[index   1] : nil
                })
            }
            Divider()
            Text("Footer")
        }
    }
}

struct FocusField: View {

    @State var displayObject: MyObject
    @FocusState var isFocused: Bool
    @Binding var focus: MyObject?
    var nextFocus: (MyObject) -> Void

    var body: some View {
        TextField("Test", text: $displayObject.value)
            .onChange(of: focus, perform: { newValue in
                self.isFocused = newValue == displayObject
            })
            .focused(self.$isFocused)
            .submitLabel(.next)
            .onSubmit {
                self.nextFocus(displayObject)
            }
    }
}
 

Пройдя через это кучу раз, до меня дошло, что при использовании FocusState вы действительно должны находиться в режиме a ScrollView Form или каком-то другом типе жадного просмотра. Даже a GeometryReader будет работать. Любой из них устранит отскок.

 struct MyObject: Identifiable, Equatable {
    public let id = UUID()
    public var name: String
    public var value: String
}

class MyObjViewModel: ObservableObject {

    @Published var myObjects: [MyObject]
    
    init(_ objects: [MyObject]) {
        myObjects = objects
    }
}


struct ContentView: View {
    @StateObject var viewModel = MyObjViewModel([
        MyObject(name: "aa", value: "1"),
        MyObject(name: "bb", value: "2"),
        MyObject(name: "cc", value: "3"),
        MyObject(name: "dd", value: "4")
    ])

    @State var focus: UUID?
    
    var body: some View {
        VStack {
            Form {
                Text("Header")
                ForEach($viewModel.myObjects) { $obj in
                    FocusField(object: $obj, focus: $focus, nextFocus: {
                        guard let index = viewModel.myObjects.map( { $0.id }).firstIndex(of: obj.id) else {
                            return
                        }
                        focus = viewModel.myObjects.indices.contains(index   1) ? viewModel.myObjects[index   1].id : viewModel.myObjects[0].id
                    })
                }
                Text("Footer")
            }
        }
    }
}

struct FocusField: View {
    
    @Binding var object: MyObject
    @Binding var focus: UUID?
    var nextFocus: () -> Void
    
    @FocusState var isFocused: UUID?

    var body: some View {
        TextField("Test", text: $object.value)
            .onChange(of: focus, perform: { newValue in
                self.isFocused = newValue
            })
            .focused(self.$isFocused, equals: object.id)
            .onSubmit {
                self.nextFocus()
            }
    }
}
 

Редактировать:

Кроме того, это действительно плохая идея — устанавливать id структуру так, как вы это сделали. Идентификатор должен быть уникальным. Это работает здесь, но лучшая практика — это UUID .

Второе редактирование: ужесточен код.