SwiftUI中如何展示数组内宝可梦的属性类型列表？

Hey there! Let's sort out that type display bug in your Pokédex app. The issue here is pretty straightforward: your section.type is an array of TypeElement enums, not a single object with a .bug property. So trying to access section.type.bug doesn't make sense—each Pokémon can have 1 or 2 types (like Bulbasaur's Grass + Poison), and we need to handle that array properly.

Solution 1: Display Each Type as a Styled Tag #

This approach shows each type as a separate, styled label (super common in Pokédex UIs):

Replace your broken Text(section.type.bug) line with this code block:

HStack(spacing: 8) {
    ForEach(section.type, id: \.self) { type in
        Text(type.rawValue)
            .font(.caption)
            .padding(.horizontal, 8)
            .padding(.vertical, 2)
            .background(getTypeColor(type))
            .foregroundColor(.white)
            .cornerRadius(6)
    }
}

You can even add a helper function to get appropriate colors for each type (optional but nice):

// Add this inside your ContentView struct
private func getTypeColor(_ type: TypeElement) -> Color {
    switch type {
    case .grass: return Color.green
    case .poison: return Color.purple
    case .fire: return Color.orange
    case .water: return Color.blue
    case .bug: return Color(red: 0.4, green: 0.8, blue: 0.2)
    case .normal: return Color.gray.opacity(0.6)
    case .flying: return Color.blue.opacity(0.5)
    // Add all other type cases to match your enum
    default: return Color.gray
    }
}

Solution 2: Display Types as a Comma-Separated String #

If you prefer a simpler text-only display, just convert the type array to a single string:

Text(section.type.map { $0.rawValue }.joined(separator: ", "))

Full Updated ContentView #

Here's what your fixed ContentView will look like (using the tag approach):

import SwiftUI

struct ContentView: View {
    var body: some View {
        List {
            ForEach(pokedex) { section in
                Section(header: Text(section.name.english)) {
                    HStack {
                        Text("HP:")
                        Text("\(section.base.hp)")
                        Text("Attack:")
                        Text("\(section.base.attack)")
                        
                        // Fixed type display here
                        HStack(spacing: 8) {
                            ForEach(section.type, id: \.self) { type in
                                Text(type.rawValue)
                                    .font(.caption)
                                    .padding(.horizontal, 8)
                                    .padding(.vertical, 2)
                                    .background(getTypeColor(type))
                                    .foregroundColor(.white)
                                    .cornerRadius(6)
                            }
                        }
                    }
                }
            }
        }
    }
    
    private func getTypeColor(_ type: TypeElement) -> Color {
        switch type {
        case .grass: return Color.green
        case .poison: return Color.purple
        case .fire: return Color.orange
        case .water: return Color.blue
        case .bug: return Color(red: 0.4, green: 0.8, blue: 0.2)
        case .normal: return Color.gray.opacity(0.6)
        case .flying: return Color.blue.opacity(0.5)
        // Add all other type cases to match your enum
        default: return Color.gray
        }
    }
}

Why This Works #

• section.type is an array, so we use ForEach to loop through each TypeElement in the array.
• type.rawValue gives us the human-readable string from the enum (like "Grass" or "Poison") that matches your JSON data.
• The helper function adds contextually appropriate colors to make the types easy to distinguish, just like the official Pokédex.

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