Я не смог найти много онлайн-ресурсов, обсуждающих множественное разбиение на страницы в 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)) } }
Вот и все, это так же просто, как испечь пирог с черникой 🎉.
Это все люди!
Хотите подключиться? Следите за мной в Твиттере 👇🏻