SwiftUI列表项跳转详情页时Dictionary数据首次加载失败

问题背景 #

使用SwiftData存储的Tile类包含[String: Double]类型的tilePattern字典属性，在SwiftUI List中展示时存在以下异常：

• 首次点击列表项进入详情页，tilePattern内容无法显示；
• 返回列表后点击其他项，字典内容正常显示；
• 再次点击首次的项，内容也能正常显示。

目前通过在列表.onTapGesture()中预加载字典数据传入详情页可解决，但代码不够简洁，需更优方案。

核心原因 #

SwiftData对于字典这类复杂类型采用懒加载机制，首次访问时底层数据库读取尚未完成，导致视图渲染时数据未就绪，从而出现空白。

优化方案 #

方案1：利用SwiftUI Sheet的item绑定自动刷新 #

修改列表页的Sheet触发逻辑，使用sheet(item:)替代sheet(isPresented:)，结合@Bindable自动监听数据变化，确保数据加载完成后视图自动更新。

修改TilesView：

struct TilesView: View {
    @Environment(\.modelContext) private var modelContext
    @Query(sort: [SortDescriptor(\Tile.name, comparator: .localized)]) private var tiles: [Tile]
    @State private var selectedTile: Tile? // 改为可选类型存储选中项

    var body: some View {
        NavigationView {
            List {
                ForEach(tiles) { tile in
                    VStack {
                        Text(tile.name)
                            .bold()
                        Text(tile.tileType)
                            .foregroundColor(.gray)
                    }
                    .onTapGesture {
                        selectedTile = tile // 直接赋值选中项
                    }
                }
            }
        }
        // 使用sheet(item:)自动管理弹窗展示/隐藏
        .sheet(item: $selectedTile) { selectedTile in
            TileDetailView(selectedTile: selectedTile)
        }
    }
}

修改TileDetailView：

移除不必要的isShowingTileDetail绑定，简化视图结构：

struct TileDetailView: View {
    @Bindable var selectedTile: Tile // 绑定选中的Tile对象
    
    let orderedKeys = ["Mosaic", "Straw", "Dotted", "Squared", "Diamond"]
    
    var body: some View {
        VStack {
            Text("Tap to change attending hours or swipe left to delete")
                .foregroundColor(.blue)
                .font(.title2)
            
            List {
                ForEach(orderedKeys, id: \.self) { key in
                    if let value = selectedTile.tilePattern[key] {
                        Text("\(key): \(value, specifier: "%.1f")")
                    }
                }
            }
        }
    }
}

优势：完全利用SwiftUI原生机制，代码简洁，无需手动处理数据加载触发，视图会在数据就绪后自动刷新。

方案2：显式触发SwiftData数据加载 #

在列表项的点击事件中，主动访问字典属性触发SwiftData的同步加载，确保进入详情页前数据已就绪。

修改TilesView中的onTapGesture：

.onTapGesture {
    let _ = tile.tilePattern // 主动访问字典，触发底层数据加载
    selectedTile = tile
    isShowingTileDetail = true
}

优势：代码改动极小，仅需一行代码即可解决问题，适合快速修复现有代码。

方案3：重构模型，将字典转为实体数组 #

将[String: Double]字典拆分为独立的Pattern实体，避免SwiftData对复杂类型的懒加载限制，同时提升数据管理的灵活性。

修改模型：

@Model
final class Pattern {
    var name: String
    var value: Double
    
    init(name: String, value: Double) {
        self.name = name
        self.value = value
    }
}

@Model
final class Tile {
    @Attribute(.unique) var name: String
    var tileType: String
    var patterns: [Pattern] // 用实体数组替代字典
    
    // 初始化时将字典转为实体数组
    init(name: String, type: String, tilePattern: [String: Double]) {
        self.name = name
        self.tileType = type
        self.patterns = tilePattern.map { Pattern(name: $0.key, value: $0.value) }
    }
    
    // 提供计算属性保持原有访问方式
    var tilePattern: [String: Double] {
        get {
            Dictionary(uniqueKeysWithValues: patterns.map { ($0.name, $0.value) })
        }
        set {
            patterns = newValue.map { Pattern(name: $0.key, value: $0.value) }
        }
    }
}

优势：从根源解决复杂类型懒加载问题，同时支持更灵活的数据操作（如增删单个Pattern）；缺点：需要修改模型结构，涉及数据迁移，适合长期迭代优化。

内容的提问来源于stack exchange，提问作者Michael May