30.06.2023 12:08
Debash 0 210 Источник

В SwiftUI компонент ScrollView по умолчанию двигается плавно, но с использованием модификаторов scrollTargetLayout() и scrollTargetBehavior() мы можем сделать так, чтобы он автоматически "привязывался" к определенным дочерним представлениям или целым страницам.

Поместим в качестве примера 10 скругленных прямоугольников в горизонтальный ScrollView, каждый из которых будет целевым при скроллинге. Поскольку .scrollTargetBehavior() установлен как .viewAligned, SwiftUI автоматически будет "привязываться" к каждому из скругленных прямоугольников:

struct ContentView: View {
    var body: some View {
        ScrollView(.horizontal) {
            LazyHStack {
                ForEach(0..<10) { index in
                    RoundedRectangle(cornerRadius: 25)
                        .fill(Color(hue: Double(index) / 10, saturation: 1, brightness: 1).gradient)
                        .frame(width: 300, height: 100)
                }
            }
            .scrollTargetLayout()
        }
        .scrollTargetBehavior(.viewAligned)
        .safeAreaPadding(.horizontal, 40)
    }
}

При использовании модификатора scrollTargetLayout(), все элементы внутри контейнера становятся целями прокрутки, к которым ScrollView может "привязываться". Если необходимо, чтобы прокрутка "привязывалась" только к определенным дочерним представлениям, то вместо scrollTargetLayout() нужно использовать модификатор scrollTarget(), который используется для отдельных элементов.

Есть и альтернативный режим привязки прокрутки — .paging. Этот режим позволяет ScrollView перемещаться ровно на ширину или высоту экрана, в зависимости от направления прокрутки:

ScrollView {
    ForEach(0..<50) { index in
        Text("Item \(index)")
            .font(.largeTitle)
            .frame(maxWidth: .infinity)
            .frame(height: 200)
            .background(.blue)
            .foregroundStyle(.white)
            .clipShape(.rect(cornerRadius: 20))
    }
}
.scrollTargetBehavior(.paging)

Здесь создается ScrollView, содержащий 50 элементов типа Text, каждый из которых заполняет полную ширину экрана. С помощью модификатора .scrollTargetBehavior(.paging) обеспечивается прокрутка ровно на один экран при каждом движении:

Первоисточник

Комментарии (0)