How to make a Dynamic PageViewController in SwiftUI? - swiftui

Question

Anyone know how to make a dynamic pageView controller in SwiftUI, iOS 14? Something that displays pages that are a function of their date so that one can scroll left or right to look at data from the past, present and future.
struct DatePg: View
{
let date: Date
var body: some View {
Text(date.description)
}
}
There is a new API that allows one to make a PageViewController with the TabView and a viewModifier. But the only examples I've seen are static. Here's an example of a static PageView.
import SwiftUI
struct SwiftUIPageView: View
{
#State private var selection = 0
var body: some View {
TabView(selection: $selection) {
Text("Hello")
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.blue)
.tag(0)
Text("World")
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.red)
.tag(1)
}.tabViewStyle(PageTabViewStyle())
.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
}
}
Already have something working using UIHostingController but passing NSManageObjectContext through the UIKit objects is cuasing problems.
Here's where I'm at so far. Still not working.
import SwiftUI
#main struct PagerApp: App
{
var body: some Scene {
WindowGroup { DatePageView() }
}
}
struct DatePageView: View
{
#StateObject var dateData = DateData(present: Date())
#State var index: Int = 1
var body: some View {
TabView(selection: $index) {
ForEach(dateData.dates, id: \.self) { date in
Text(date.description)
.onAppear { dateData.current(date: date) }
.tag(dateData.tag(date: date))
}
}
.tabViewStyle(PageTabViewStyle())
.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
}
}
class DateData: ObservableObject
{
#Published var dates: [Date]
init(present: Date) {
let past = present.previousDay()
let future = present.nextDay()
self.dates = [past, present, future]
}
func current(date: Date) {
//center around
guard let i = dates.firstIndex(of: date) else { fatalError() }
self.dates = [ dates[i].previousDay(), dates[i], dates[i].nextDay() ]
print("make item at \(i) present")
}
func tag(date: Date) -> Int {
guard let i = dates.firstIndex(of: date) else { fatalError() }
return i
}
}

Answer 1

You can create view dynamically using an array and ForEach.
Here is an example using an array of strings:
// See edited section
You could pass the items you want in the View initializer
Edit:
Here is an example for adding a new page each time I reach the last one:
struct SwiftUIPageView: View
{
#State private var selection = "0"
#State var items: [String] = ["0", "1", "2", "3"]
var body: some View {
TabView(selection: $selection) {
ForEach(items, id: \.self) { item in
Text(item)
.frame(maxWidth: .infinity, maxHeight: .infinity)
.background(Color.red)
.tag(item)
}
}.tabViewStyle(PageTabViewStyle())
.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
.onChange(of: selection, perform: { value in
if Int(value) == (self.items.count - 1) {
self.items.append("\(self.items.count)")
}
})
.id(items)
}
}
The last id(items) is important because it forces the View to reload when the array changes.