ios – Want customized horizontal grid with a number of rows and columns however linked to SwiftData fashions in SwiftUI

Nonetheless studying about grids. The extra I believe via this, maybe grids due to how the grid flows is just not the correct strategy to current this knowledge. Undoubtedly have to scroll this video games part as you will note however possibly scroll one other customized view. Hope somebody with tons extra expertise can information.

For Now:
I’ve 3 SwiftData fashions ** Included solely related fields **

class League {
    
    var title: String    
    var bowlersPerTeam: Int         // What number of bowlers per crew
    var gamesPerSession: Int        // What number of video games per session
    var groups = [Team]()            // 1 to many groups on a league

class Staff {
    var title: String
    var quantity: Int
    var league: League?             // Staff belongs to only 1 league
    var bowlers = [Bowler]()        // 1 to many bowlers per crew

class Bowler {
    var title: String
    var scores: [Int]               // 1 to many scores (video games) per session  
    var crew: Staff?                 // Bowler belongs to only 1 crew

I notice {that a} bowler may belong to greater than 1 league after which a part of a crew on that different league. Will fear about that many-to-many setup one other day.

What I want is a Horizontal ScrollView that incorporates a grid of bowlers vertically with their particular person scores horizontally throughout. Most leagues bowl 3 video games every session however occasionally a sooner or later event may have a bowler bowling 6 video games and even 8. So I have to dynamically create a grid with a row for every bowler and textfields for every sport they bowl horizontally. I want a header above that scrolls with the sport containers so I do know which sport field belongs to what sport. There might be title data on every row for bowlers that’s stationary to the left of ScrollView (to know who I’m engaged on) and whole for every bowler row to the proper of the ScrollView.

Every rating (sport) field must be linked to the array of bowler.scores array after which I can loop in actual time to replace totals on the top to show.

I constructed a view with a “bowler” row and a ScrollView for the rating (sport) part (black border containers) which scrolls. I may apply the header if just one row / bowler on a crew. However that is by no means the case so the header does not sync as in second image. That’s the reason I’m attempting to tie all of them collectively.

This can be a View that creates the only bowler row.

It then will get used to construct the rating (sport) entry display screen with particular person scrolling bowler rows for the video games. Discover once I took the display screen seize, I moved a few the sport rows however headers stay nonetheless. I can repair alignment afterward the remainder. However the header displaying sport numbers 1 2 3 and many others must match what number of precise video games are being bowled.

I would really like that total rating (sport) part with black borders to construct dynamically and connect with the info fashions for every bowlers video games. So for instance 4 bowlers per crew with every one bowling 3 video games every. Then instance having 3 bowlers per crew with 6 video games every to see how issues scroll. Utilizing an iPad in Panorama for extra room.

I began just a little check view to play with the grid and go in check knowledge and bindable to League, Staff & Bowler. However cannot dynamically set the variety of rows and columns based mostly on league.bowlersPerTeam and league.gamesPerSession due to the way in which structs are constructed. I believe I’m assigning the TextField worth to the suitable sport for a bowler however haven’t checked it. Used GridItem(.fastened(50)) for testing however possibly a greater strategy to have that change dynamically based mostly on variety of video games.

Here’s what I began…

import SwiftUI
import SwiftData

struct GameGridView: View {
    @Bindable var league: League
    @Bindable var crew: Staff
    @Bindable var bowler: Bowler
    
    // This must get the depend from league.bowlerPerTeam
    @State personal var myBowlerRows = Array(repeating: GridItem(.fastened(50)), depend: 3)
    
    @State personal var myGameColumns = Array(repeating: GridItem(.fastened(50)), depend: 5)
    
    let bowlerRows: [GridItem] = [GridItem(.fixed(50)), GridItem(.fixed(50)), GridItem(.fixed(50)), GridItem(.fixed(50))]
    let gameColumns: [GridItem] = [GridItem(.fixed(50)), GridItem(.fixed(50)), GridItem(.fixed(50))]
    
    var physique: some View {
        Textual content("(league.bowlersPerTeam) bowlers per crew that roll (league.gamesPerSession) video games per session")
        ScrollView(.horizontal) {
            LazyHGrid(rows: myGameColumns) {
                ForEach(1..

So this appears appropriate for 4 bowlers vertically and three video games every which matches the instance knowledge I linked. I do know I must create some logic because the grid builds to tie the proper sport field to the proper bowler and likewise appropriate sport place within the array of scores. Type of considering of it like a 2-dimensional array.

However I’m exhausting coding bowlerRows and gameColumns to make the grid construct correctly. This must be executed dynamically however have not found out how you can assign these worth since init of variables is just not full.

This line I modified:

@State personal var myBowlerRows = Array(repeating: GridItem(.fastened(50)), depend: league.bowlersPerTeam)

Which give the error: Can not use occasion member ‘league’ inside property initializer; property initializers run earlier than ‘self’ is out there

I believe I am shut so possibly somebody can see what I am lacking in getting the correct rows / columns dynamically arrange and linked to the info. Particularly Bowler.Scores array.

Thanks,
Scott