SwiftUI 数组套字典如何遍历展示[2025-12-01]

在开发中经常遇到，一个数组包含以字典为子元素的情况。我在SwiftUI中，如何对数组数据进行访问并展示在界面上，遇到了不能访问的问题， 下面是对该问题的解决以及记录。方便日后快速解决类似问题。

import SwiftUI
import CoreBluetooth

// 模拟 CBCharacteristic（仅用于示例）
class MockCharacteristic: CBCharacteristic {
    init(uuid: CBUUID) {
        super.init()
    }
}

struct CharView: View {
    // 模拟测试数据
    let charData: [[String: [CBCharacteristic]]] = [
        ["FFE0": [MockCharacteristic(uuid: CBUUID(string: "FFE1"))]],
        ["FFF0": [MockCharacteristic(uuid: CBUUID(string: "FFF1")), MockCharacteristic(uuid: CBUUID(string: "FFF2"))]],
        [:] // 空字典
    ]
    
    var body: some View {
        VStack(spacing: 15) {
            Text("蓝牙特征数据列表")
                .font(.title)
            
            charDataContentView
        }
        .padding()
    }
    
    @ViewBuilder 
    private var charDataContentView: some View { // 重点、亮点
        if charData.isEmpty {
            Text("暂无数据")
                .foregroundColor(.gray)
        } else {
            ForEach(charData.indices, id: \.self) { index in // 重点、亮点
                let dict = charData[index]
                VStack(alignment: .leading, spacing: 5) {
                    Text("第 \(index+1) 组")
                        .font(.subheadline)
                        .bold()
                    
                    if dict.isEmpty {
                        Text("→ 空服务")
                            .foregroundColor(.gray)
                    } else {
                        ForEach(Array(dict), id: \.key) { key, chars in
                            Text("→ 服务 \(key)：\(chars.count) 个特征") // 重点、亮点
                        }
                    }
                }
                .padding(.vertical, 5)
                .padding(.horizontal, 10)
                .background(Color(.systemGray6))
                .cornerRadius(8)
            }
        }
    }
}

// 预览
struct CharView_Previews: PreviewProvider {
    static var previews: some View {
        CharView()
    }
}

总结

ViewBuilder 核心规则.png