Einführung

Sie können jetzt die Liste mit Code scrollen, den Sie mit der Swift-Benutzeroberfläche in iOS13 in iOS14 nicht erstellen konnten. Dieser Artikel fasst die Implementierung zusammen.

Scrollen unter iOS 13

Es ist ein Prozess des "automatischen Bildlaufs zur ○-ten Zelle", der bei der Entwicklung von iOS-Apps üblich ist. Mit der Swift-Benutzeroberfläche unter iOS 13 war dies nicht möglich.

struct ContentView: View {
    var body: some View {
        List(0..<100) {
            Text("\($0)")
        }
    }
}

In UIKit können Sie die entsprechende Anforderung einfach implementieren, indem Sie Methoden wie "scrollToRow", "scrollToItem" in der folgenden Form aufrufen. Ich habe oft nur für diese Funktion "UIViewRepresentable", "UIViewControllerRepresentable" usw. verwendet.

// UITableView
tableView.scrollToRow(at: IndexPath(row: 10, section: 0),
                      at: .top,
                      animated: true)

// UICollectionView
collectionView.scrollToItem(at: .init(item: 10, section: 0), 
                            at: .top,
                            animated: true)

Scrollen unter iOS14

iOS14 hat eine neue Ansicht namens "ScrollViewReader" hinzugefügt, die den Bildlaufstatus steuern kann. Auf diese Weise ist es möglich, den Prozess des automatischen Bildlaufs zu einem beliebigen Punkt zu implementieren.

Der Beispielcode ist unten dargestellt.

Vorbereitung

Richten Sie zunächst ein TextField ein, um den Bildlaufpunkt als Vorbereitung anzugeben.

struct ContentView: View {
    @State private var text: String = ""

    var body: some View {
        VStack {
            HStack {
                TextField("input row number", text: $text)
                Button("Scroll") {
                    guard let row = Int(text) else { return }
                    print(row)
                }
            }.padding()
            
            List(0..<100) {
                Text("\($0)")
            }
        }
    }
}

Auf diese Weise können Sie auf die Schaltfläche tippen, um den Wert abzurufen, den der Benutzer in das Textfeld eingegeben hat.

Bildlaufsteuerung

Dann ist es der Implementierungsteil des eigentlichen Bildlaufs.

Schließen Sie zunächst den Teil, in dem Sie das Scrollen steuern möchten, mit "ScrollViewReader" ein. Auf diese Weise erhalten Sie eine ScrollViewProxy-Instanz, die scrollgesteuert werden kann.

struct ContentView: View {
    @State private var text: String = ""

    var body: some View {
        VStack {
+           ScrollViewReader { (proxy: ScrollViewProxy) in
                HStack {
                    TextField("input row number", text: $text)
                    Button("Scroll") {
                        guard let row = Int(text) else { return }
                    }
                }.padding()
                List(0..<100) {
                    Text("\($0)")
                }
+           }
        }
    }
}

Darüber hinaus wird der Zielansicht und eine ID zur Angabe der Bildlaufposition zugewiesen Das Scrollen kann einfach durch Angabe der ID in der scrollTo -Methode von ScrollViewProxy an der Stelle erreicht werden, an der Sie die Steuerung starten möchten.

struct ContentView: View {
    @State private var text: String = ""

    var body: some View {
        VStack {
            ScrollViewReader { (proxy: ScrollViewProxy) in
                HStack {
                    TextField("input row number", text: $text)
                    Button("Scroll") {
                        guard let row = Int(text) else { return }
+                       withAnimation {
+                           proxy.scrollTo(row, anchor: .top)
+                       }
                    }
                }.padding()

                List(0..<100) {
                    Text("\($0)")
+                       .id($0)
                }
            }
        }
    }
}

Jetzt können Sie tun, was Sie wollen.

Wenn Sie "withAnimation" nicht hinzufügen, wird die Bildlaufanimation übrigens nicht ausgeführt. Zusätzlich kann die Position nach dem Scrollen mit dem zweiten Argument "Anker" detailliert angegeben werden.

Bonus

Auch für Grid hat es gut funktioniert.

struct ContentView: View {
    @State private var text: String = ""

    var body: some View {
        VStack {
            ScrollViewReader { (proxy: ScrollViewProxy) in
                HStack {
                    TextField("input row number", text: $text)
                    Button("Scroll") {
                        guard let row = Int(text) else { return }
                        withAnimation {
                            proxy.scrollTo(row, anchor: .top)
                        }
                    }
                }.padding()
                
                ScrollView {
                    LazyVGrid(
                        columns: [
                            GridItem(.flexible(minimum: 0, maximum: .infinity)),
                            GridItem(.flexible(minimum: 0, maximum: .infinity)),
                        ],
                        alignment: .center,
                        spacing: nil
                    ) {
                        ForEach(0..<100) {
                            Text("\($0)")
                                .frame(height: 100)
                        }
                    }
                }
            }
        }
    }
}