Я не смог найти много онлайн-ресурсов, обсуждающих множественное разбиение на страницы в SwiftUI, поэтому я решил написать один, основываясь на своем опыте.

Удачным примером является приложение Zara для iOS, его домашняя страница точно отражает то, что я пытаюсь объяснить в этой статье.

По сути, нам нужно настроить вертикальную и горизонтальную прокрутку страниц, своего рода матрицу, которая может прокручиваться в любом направлении.

Прежде чем начать

Предположим, у нас есть Модель, содержащая всю информацию, которую нам нужно показать, например:

struct Model {
    let books: [Book]
}

struct Book: Identifiable {
    let id = UUID()
    let pages: [Page]
}

struct Page: Identifiable {
    let id = UUID()
    let imageName: String
}

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

Знаю, без наглядной схемы это сложно представить, поэтому я подготовила ее для вас ❤️.

Теперь нам нужен View, который содержит все книги и прокручивает все страницы по вертикали и горизонтали; взгляните на код ниже:

let model: Model
    
var body: some View {
    GeometryReader { proxy in // Read screen size
        TabView { // Books TabView
            ForEach(model.books) { book in // Iterate the books
                TabView { // Pages TabView
                    ForEach(book.pages) { page in // Iterate the pages
                        Image(page.imageName) // Show the single page content
                            .rotationEffect(.degrees(-90)) // Rotate page content
                            .frame(width: proxy.size.width, height: proxy.size.height) // Set the page content frame
                            .onTapGesture {
                                // Tap action
                            }
                    }
                }
                .rotationEffect(.degrees(90)) // Rotate Pages TabView
                .frame(width: proxy.size.height, height: proxy.size.width) // Set the main frame
            }
        }
        .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
    }
}

Вот и все, это так же просто, как испечь пирог с черникой 🎉.

Это все люди!

Хотите подключиться? Следите за мной в Твиттере 👇🏻

https://twitter.com/Gemix95