SwiftUI中使用变量引用图片导致视图内图片不可见问题求助

一、先修正基础代码错误 #

1. 调整GameView的变量声明 #

你在GameView中给外部传入的gameData标记@State是错误的，@State仅用于管理视图内部的私有状态，外部传入的静态数据直接用let即可：

struct GameView: View {
    let gameData: [GameDataModel] // 替换@State为let
    
    var body: some View {
        ForEach(gameData) { game in
            ZStack {
                Image(game.image)
                    .resizable()
                    .frame(width: 180, height: 250)
                    .cornerRadius(5)
            }
        }   
    }
}

2. 确保GameDataModel可被ForEach识别 #

ForEach需要遍历的元素具备唯一标识，最简便的方式是让模型遵循Identifiable协议：

struct GameDataModel: Identifiable {
    let id = UUID() // 自动生成唯一ID
    let image: String
    let title: String
}

如果不想遵循Identifiable，也可以在ForEach中显式指定ID字段（要求模型属性可哈希）：

ForEach(gameData, id: \.title) { game in
    // 视图内容
}

二、排查图片不显示的核心原因 #

1. 确认图片资源配置正确 #

• 检查game.jpg是否已添加到项目的Assets.xcassets中，名称完全匹配（注意大小写，比如Game.jpg和game.jpg会被视为不同资源）
• 如果图片是直接放在项目目录下（而非Assets），需确保图片已勾选对应Target，且初始化Image时指定bundle：

  Image(game.image, bundle: .main)
  

2. 纠正@Published的使用误解 #

你不需要给全局GameData标记@Published，这个属性仅用于动态更新的数据集：当数据需要从网络加载、或用户操作会修改数据时，才需要将数据集放在遵循ObservableObject的类中，用@Published标记以触发视图更新：

class GameDataStore: ObservableObject {
    @Published var gameData: [GameDataModel] = [
        GameDataModel(image: "game.jpg", title: "Legend of Zelda")
    ]
}

之后在主视图中用@StateObject引用：

struct MainView: View {
    @StateObject private var dataStore = GameDataStore()
    let columns = [GridItem(.flexible())] // 示例列配置
    
    var body: some View {
        ScrollView {
            LazyVGrid(columns: columns, spacing: 15) {
                GameView(gameData: dataStore.gameData)
            }
        }
    }
}

静态数据集完全不需要这一步，按最初的静态写法即可。

三、验证调试步骤 #

1. 清理项目缓存（菜单栏Product -> Clean Build Folder）后重新编译
2. 给ZStack临时添加背景色，确认ForEach是否正常渲染视图：

   ZStack {
       Color.gray.opacity(0.3) // 临时背景色
       Image(game.image)
           .resizable()
           .frame(width: 180, height: 250)
           .cornerRadius(5)
   }
   

   • 如果背景色显示，说明图片资源存在问题
   • 如果背景色不显示，说明ForEach未正确遍历数据，检查模型的标识实现

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