With each tab containing grid, how to fill each grid - swiftui-tabview

Question

I want to have a TabView, where each tab is a LazyVGrid. I want to fill each grid in a particular tab, before another tab gets created, and I'd like this to be adaptive to whatever screen is being seen (in particular iPad vs. iPhone).
I have something like the below:
struct ContentView: View {
var items: Items
var columns = [GridItem(.adaptive(minimum: 100))]
var body: some View {
VStack {
TabView {
ForEach((1...items.getNumPages(???)), id: \.self) {page in
VStack {
LazyVGrid(columns: columns, alignment: .leading, spacing: 10) {
ForEach(items.getItems(page: page, ???) { item in
ItemView(item: item)
}.tabItem{}.tag(page)
}.padding(.leading).padding(.trailing)
}
}
}.tabViewStyle(.page)
.indexViewStyle(.page(backgroundDisplayMode: .always))
}
}
}
Note that the ItemView will always be the same size for any Item. But depending on the screen size, you might have a view with 2 columns and 40 elements, or 3 columns with 50 elements, etc. In the above I put in ??? to pass in something that will tell me: 1) how many tabs (pages), 2) how many elements per tab (page). I don't want any scrolling at all, just the swipe behavior to move from tab to tab. I suppose I could throw in a GeometryReader and do a bunch of size computation to figure out how many items will fit per page, but is there something simpler?
Thx.

Answer 1

I came up with something like this, the only change I would do is to calculate all the pagination related things on the Items struct init () if you already know how many items there will be.
Since I don't know the sizes of the items inside the grids I just put an arbitrary number per page
import SwiftUI
struct Items{
let quantity: Int
var pager: Int = 0
var column = GridItem(.flexible(minimum: 100))
func getNumPages() -> Int{
switch UIDevice.current.userInterfaceIdiom {
case .phone:
return Int(ceil(Double(self.quantity / 50)))
case .pad:
return Int(ceil(Double(self.quantity / 100)))
#unknown default:
return Int(ceil(Double(self.quantity / 100)))
}
}
func getColums() -> [GridItem] {
switch UIDevice.current.userInterfaceIdiom {
case .phone:
return [column, column]
case .pad:
return [column, column, column]
#unknown default:
return [column, column, column]
}
}
mutating func getItems(page: Int) -> Int {
pager = page + (UIDevice.current.userInterfaceIdiom == .pad ? 100 : 50)
return pager
}
}
struct gridProblem: View {
#State var items = Items(quantity: 500)
var body: some View {
VStack {
TabView {
ForEach((0...items.getNumPages()), id: \.self) {page in
VStack {
LazyVGrid(columns: items.getColums(), alignment: .leading, spacing: 10) {
ForEach(items.pager..<items.getItems(page: Int(page))) { item in
HStack{
Spacer()
Text("\(item + self.items.pager)")
Spacer()
}.background(Color.gray)
}
}.padding(.leading).padding(.trailing)
}
.id(UUID())
.tabItem{
}.tag(page)
}
}.tabViewStyle(.page)
.indexViewStyle(.page(backgroundDisplayMode: .always))
}
}
}

Answer 2

The solution was to use a GeometryReader, and you do have to compute the sizes. It wasn't that bad, the key concepts are computing the number of items per column, and the number of columns per page based on the GeometryReader size. It's absolutely assumed that the items are fixed size.
In my example, the items are just randomly generated words. The below works on all manner of ipads and phones, and deals well when rotating the device.
import SwiftUI
struct Items {
private let alphabet = "abcdefhijklmnopqrstuvwxyz"
private var alphaArray: [String] { return alphabet.map { String($0) }}
var items: [String] = []
static let column = GridItem(.fixed(itemWidth))
static let verticalSpacing: CGFloat = 10
static let itemHeight: CGFloat = 20
static let itemWidth: CGFloat = 160
static let horizontalSpacing: CGFloat = 20
init(quantity: Int) {
for _ in 1...quantity {
let nchars = Int.random(in: 4..<16)
let tempArray = alphaArray.shuffled()
items.append( tempArray[0...nchars].joined() )
}
items.sort()
}
private func wordsPerColumn(height: CGFloat) -> Int {
var retval = Int( (height - Items.verticalSpacing) / (Items.itemHeight + Items.verticalSpacing))
// Let's remove 1, keep it roomy below.
retval -= 1
return retval
}
private func columnsPerPage(width: CGFloat) -> Int {
return Int( width / (Items.itemWidth + Items.horizontalSpacing))
}
func getPageSize(size: CGSize) -> Int {
return wordsPerColumn(height: size.height) * columnsPerPage(width: size.width)
}
func getNumPages(size: CGSize) -> Int {
var retval = items.count / getPageSize(size: size) + 1
if items.count % getPageSize(size: size) == 0 {
retval = retval - 1
}
return retval
}
func getColumns(size: CGSize) -> [GridItem] {
return [GridItem](repeating: Items.column, count: columnsPerPage(width: size.width))
}
func getItems(size: CGSize, page: Int) -> [String] {
let pageSize = getPageSize(size: size)
let startIdx = (page-1) * pageSize
let endIdx = min(startIdx + pageSize-1, items.count-1)
return Array(items[startIdx...endIdx])
}
}
struct ItemView: View {
var item: String
var body: some View {
Text(item.capitalized).frame(width: Items.itemWidth, height: Items.itemHeight, alignment: .leading).background(.orange)
}
}
struct ContentView: View {
#State var items = Items(quantity: 210)
var body: some View {
VStack {
Text("TOP")
GeometryReader { reader in
TabView {
ForEach((1...items.getNumPages(size: reader.size)), id: \.self) {page in
VStack {
LazyVGrid(columns: items.getColumns(size: reader.size), alignment: .leading, spacing: Items.verticalSpacing) {
ForEach(items.getItems(size: reader.size, page: page), id: \.self) { item in
ItemView(item: item)
}.background(Color.gray)
}.padding().border(.red, width: 3)
Spacer()
}
.id(UUID())
.tabItem{
}.tag(page)
}
}.tabViewStyle(.page)
.indexViewStyle(.page(backgroundDisplayMode: .always))
}
Spacer()
}
}
}