SwiftUI中基于SwiftData模型实现动态行列的横向滚动网格

核心问题拆解 #

1. 动态GridItem初始化报错：league是实例属性，在@State初始化时self尚未创建，无法直接调用
2. 表头与计分区不同步滚动：之前的布局未将表头与内容放在同一滚动容器内
3. 数组元素绑定失效：SwiftData数组元素的绑定需通过明确索引路径实现

一步步解决 #

1. 补全SwiftData模型（基础必备） #

原始模型缺少@Model宏，且得分数组无默认长度匹配逻辑，先修正：

import SwiftData

@Model
class League {
    var name: String    
    var bowlersPerTeam: Int
    var gamesPerSession: Int
    @Relationship(deleteRule: .cascade) var teams = [Team]()
    
    init(name: String, bowlersPerTeam: Int, gamesPerSession: Int) {
        self.name = name
        self.bowlersPerTeam = bowlersPerTeam
        self.gamesPerSession = gamesPerSession
    }
}

@Model
class Team {
    var name: String
    var number: Int
    var league: League?
    @Relationship(deleteRule: .cascade) var bowlers = [Bowler]()
    
    init(name: String, number: Int) {
        self.name = name
        self.number = number
    }
}

@Model
class Bowler {
    var name: String
    var scores: [Int]
    var team: Team?
    
    // 初始化时直接按赛事局数生成默认得分数组
    init(name: String, initialScoreCount: Int) {
        self.name = name
        self.scores = Array(repeating: 0, count: initialScoreCount)
    }
}

2. 动态生成GridItem：用计算属性替代@State #

放弃在@State初始化中依赖league，改用计算属性自动响应模型变化：

// 在View内定义计算属性
private var scoreColumns: [GridItem] {
    // 每局得分框固定宽度，数量等于赛事局数
    Array(repeating: GridItem(.fixed(60)), count: league.gamesPerSession)
}

3. 实现同步滚动的完整布局 #

将整个内容放入同一个横向ScrollView，左侧固定选手名称，中间滚动区包含表头与输入框，右侧固定总分列，确保滚动时表头与得分区完全对齐：

struct ScoreEntryView: View {
    // 用@Bindable包装SwiftData模型，确保双向绑定生效
    @Bindable var league: League
    @Bindable var team: Team
    
    private var scoreColumns: [GridItem] {
        Array(repeating: GridItem(.fixed(60)), count: league.gamesPerSession)
    }
    
    // 实时计算选手总分
    private func totalScore(for bowler: Bowler) -> Int {
        bowler.scores.reduce(0, +)
    }
    
    var body: some View {
        ScrollView(.horizontal) {
            HStack(spacing: 0) {
                // 左侧固定：选手名称列
                VStack(spacing: 0) {
                    Text("选手")
                        .frame(width: 120, height: 40)
                        .background(Color.gray.opacity(0.2))
                        .font(.headline)
                    
                    ForEach(team.bowlers) { bowler in
                        Text(bowler.name)
                            .frame(width: 120, height: 40)
                            .border(Color.gray.opacity(0.1))
                    }
                }
                
                // 中间滚动区：表头+计分输入框
                VStack(spacing: 0) {
                    // 局数表头
                    LazyHGrid(columns: scoreColumns, spacing: 0) {
                        ForEach(1...league.gamesPerSession, id: \.self) { gameNum in
                            Text("第\(gameNum)局")
                                .frame(height: 40)
                                .background(Color.gray.opacity(0.2))
                                .font(.subheadline)
                                .border(Color.gray.opacity(0.1))
                        }
                    }
                    
                    // 计分输入区域：按选手垂直排列
                    LazyVGrid(columns: [GridItem(.fixed(40))], spacing: 0) {
                        ForEach(team.bowlers.indices, id: \.self) { bowlerIndex in
                            LazyHGrid(columns: scoreColumns, spacing: 0) {
                                ForEach(team.bowlers[bowlerIndex].scores.indices, id: \.self) { scoreIndex in
                                    // 通过索引绑定数组元素，确保SwiftData识别绑定路径
                                    TextField("0", value: $team.bowlers[bowlerIndex].scores[scoreIndex], format: .number)
                                        .frame(height: 40)
                                        .multilineTextAlignment(.center)
                                        .border(Color.gray.opacity(0.1))
                                        .keyboardType(.numberPad)
                                }
                            }
                        }
                    }
                }
                
                // 右侧固定：总分列
                VStack(spacing: 0) {
                    Text("总分")
                        .frame(width: 80, height: 40)
                        .background(Color.gray.opacity(0.2))
                        .font(.headline)
                    
                    ForEach(team.bowlers) { bowler in
                        Text("\(totalScore(for: bowler))")
                            .frame(width: 80, height: 40)
                            .border(Color.gray.opacity(0.1))
                            .font(.subheadline)
                    }
                }
            }
        }
        .onAppear {
            // 兜底检查：确保每个选手的得分数组长度与赛事局数一致
            for (index, bowler) in team.bowlers.enumerated() {
                if bowler.scores.count != league.gamesPerSession {
                    team.bowlers[index].scores = Array(repeating: 0, count: league.gamesPerSession)
                }
            }
        }
    }
}

4. 关键细节提示 #

• 数组绑定技巧：不能直接用$bowler.scores[scoreIndex]，必须通过team.bowlers[bowlerIndex]的索引访问，这是SwiftData数组绑定的要求
• 同步滚动原理：表头与计分区共享同一个横向滚动容器，滚动时整体联动，自然保持对齐
• 动态适配：计算属性scoreColumns会自动跟随league.gamesPerSession变化，无需手动更新状态

避坑指南 #

• 禁止在@State初始化中调用实例属性：改用计算属性或onAppear处理动态状态
• 必须确保得分数组长度匹配：否则会出现数组越界或绑定失效问题
• 务必用@Bindable包装SwiftData模型：否则视图无法响应模型数据变化

内容的提问来源于stack exchange，提问作者S. Hatmaker