SwiftUI中如何正确展示图片资源及对应标题？

你的枚举BackgroundOptions的rawValue是用于显示的标题（比如"Full Border"），但Assets里的图片名称是枚举的case名（比如"fullBorder"），两者完全不匹配。Image(backgroundOptions.rawValue)实际上是在找名为"Blank"、"Full Border"的图片，而你的Assets里根本没有这些名称的图片，所以系统无法正确加载对应图片，导致出现统一显示某张图的问题。

有两种简单的修正方式，选一种即可：

方式1：给枚举新增图片名称属性 #

保留现有rawValue作为显示标题，新增一个计算属性返回对应图片名：

enum BackgroundOptions: String, CaseIterable {
    case blank = "Blank"
    case fullBorder = "Full Border"
    case laurelWreath = "Laurel Wreath"
    case simpleLine = "Simple Lines"
    
    // 新增图片名称属性
    var imageName: String {
        switch self {
        case .blank: return "blank"
        case .fullBorder: return "fullBorder"
        case .laurelWreath: return "laurelWreath"
        case .simpleLine: return "simpleLine"
        }
    }
}

然后修改视图里的Image调用：

Image(backgroundOptions.imageName) 
    .resizable()
    .aspectRatio(contentMode: .fit)

方式2：调整枚举rawValue为图片名，新增显示标题属性 #

让枚举的rawValue直接对应图片名称，额外加属性存显示标题：

enum BackgroundOptions: String, CaseIterable {
    // rawValue默认等于case名，即对应图片名称
    case blank
    case fullBorder
    case laurelWreath
    case simpleLine
    
    // 新增显示标题属性
    var displayTitle: String {
        switch self {
        case .blank: return "Blank"
        case .fullBorder: return "Full Border"
        case .laurelWreath: return "Laurel Wreath"
        case .simpleLine: return "Simple Lines"
        }
    }
}

视图里分别调用对应的属性：

ZStack {
    Image(backgroundOptions.rawValue) // rawValue是图片名
        .resizable()
        .aspectRatio(contentMode: .fit)
    Text(backgroundOptions.displayTitle) // 用新属性显示标题
        .font(.title)
}

• 确保Assets里的图片名称和你代码里用的完全一致，包括大小写、下划线/空格（真实设备上图片名称区分大小写，模拟器可能不严格）。
• 可以给Text加个foregroundColor（比如.white），让文字在图片上更清晰。

如果要实现用户选择模板后跳转到编辑页面，可以用ObservableObject做ViewModel管理选中状态：

1. 创建ViewModel类：

import Foundation
import SwiftUI

class TemplateViewModel: ObservableObject {
    @Published var selectedTemplate: Templates.BackgroundOptions?
    
    func selectTemplate(_ template: Templates.BackgroundOptions) {
        selectedTemplate = template
    }
}

2. 修改TemplatesView注入ViewModel，并添加跳转逻辑：

struct TemplatesView: View {
    @StateObject private var viewModel = TemplateViewModel()
    
    var body: some View {
        NavigationView {
            VStack {
                Text("Choose a Template to Edit").font(.headline)
                List{
                    ForEach(Templates.BackgroundOptions.allCases, id: \.self) { option in
                        Button(action: {
                            viewModel.selectTemplate(option)
                        }) {
                            ZStack {
                                Image(option.imageName) // 对应你选的枚举方案
                                    .resizable()
                                    .aspectRatio(contentMode: .fit)
                                Text(option.rawValue) // 或option.displayTitle
                                    .font(.title)
                                    .foregroundColor(.white)
                            }
                        }
                    }
                }
            }
            .navigationTitle("Epic Foundries🏆")
            // 跳转到编辑视图
            .navigationDestination(item: $viewModel.selectedTemplate) { selected in
                EditTemplateView(selectedTemplate: selected)
            }
        }
    }
}

3. 创建编辑视图：

struct EditTemplateView: View {
    let selectedTemplate: Templates.BackgroundOptions
    
    var body: some View {
        VStack {
            Text("Editing \(selectedTemplate.rawValue)") // 对应枚举方案调整
                .font(.title)
            Image(selectedTemplate.imageName) // 对应枚举方案调整
                .resizable()
                .aspectRatio(contentMode: .fit)
            // 这里添加编辑相关的控件
        }
        .navigationTitle("Edit Template")
    }
}

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