Прокрутка к разным позициям в ScrollView с помощью ScrollViewReader в SwiftUI 2

Введение в ScrollViewReader

На недавней конференции WWDC 2020 Apple представила ScrollViewReader. Это одна из функций, которую многие из нас с нетерпением ждали из-за отсутствия поддержки прокрутки в SwiftUI 1.

Как известно многим из нас, в SwiftUI 1 не было встроенной поддержки для прокрутки к определенной строке. Вероятно, есть несколько разных хакерских способов сделать это с помощью кучи кода, написанного разными людьми в Stack Overflow, но это не так. Не будет ли лучше, если это можно будет сделать с помощью всего лишь строчки кода?

С ScrollViewReader теперь вы можете прокручивать до любой строки с помощью индекса.

Примечание. То же самое не работает для List. Переход к элементу в List не поддерживается на момент публикации.

«ScrollViewReader: представление, дочерний элемент которого определяется как функция ScrollViewProxy, нацеленный на прокручиваемые представления в дочернем элементе».

- документация Apple

Предпосылки

Чтобы следовать этому руководству, вам потребуются базовые знания в:

Базовое знакомство со Swift
По крайней мере, Xcode 12+
Поддерживает только iOS 14+

Начало работы с ScrollViewReader

Для начала вам нужно встроить ScrollViewReader в ScrollView.

Здесь вы будете использовать изображения из SF Symbols - первая версия была впервые представлена в WWDC 2019, а последующая версия - в WWDC 2020. Это отличный инструмент от Apple, где вы можете найти множество полезных значков, но в основном он поддерживает только iOS 13. +. Чтобы он поддерживал iOS 13+, есть обходной путь (экспорт).

В любом случае, давайте не будем отвлекаться на символы SF и сосредоточимся на ScrollViewReader. Идея состоит в том, чтобы иметь кнопку поверх ScrollView с примерно 50 изображениями.

ScrollView {
    ScrollViewReader { value in
        // 1
        Button("Jump to 30") {
            value.scrollTo(30, anchor: .top)
        }
        // 2
        ForEach(1..<51) { index in
            Image(systemName: "\(index).square")
                .font(.largeTitle)
                .frame(height: 70)
                .id(index)
        }
    }
}