如何在SwiftUI中显示图像资源及其标题

rxztt3cl  于 2023-03-28  发布在  Swift
关注(0)|答案(1)|浏览(137)

我试图创建一个列表视图,显示4个不同的图像和它们各自的标题。我的代码显示了4个不同的标题,即,enum backgroundOptions的原始值。但它只显示4个模板标题下的4个不同图像中的一个。根据Apple的文档,Image结构体需要String数据类型。因此,当我在String中显式键入其中一个图像的名称时,List中的所有4个空格都显示相同的模板。
看起来ForEach没有迭代4个图像。有人能帮我看看我错过了什么吗?
我的数据文件看起来像这样:

import Foundation

struct Template {
    var template: Templates
    
    init(template: Templates) {
      self.template = template 
    }
}

struct Templates {
  var backgroundOptions: BackgroundOptions
      
  enum BackgroundOptions: String, CaseIterable {
    case blank = "Blank"
    case fullBorder = "Full Border"
    case laurelWreath = "Laurel Wreath"
    case simpleLine = "Simple Lines"
  }
}

我的视图文件看起来像这样:

import SwiftUI

struct TemplatesView: View {
 
  var body: some View {
    NavigationView {
        VStack {
            Text("Choose a Template to Edit").font(.headline)
        List{
            ForEach(Templates.BackgroundOptions.allCases,
                         id: \.self) { backgroundOptions in
                ZStack {
                    Image(backgroundOptions.rawValue) 
                     .resizable()
                     .aspectRatio(contentMode: .fit)
                   Text(backgroundOptions.rawValue)
                     .font(.title)
                }
              }
            }
          }
        .navigationTitle("Epic Foundries🏆")
    }
  }
}
 

struct TemplatesView_Previews: PreviewProvider {
    static var previews: some View {
        TemplatesView()
    }
}

我要使用的图像保存在“Assets”文件夹下。它们的名称为:

blank 
fullBorder
laurelWreath
simpleLine

我是一个新手,所以这是我到目前为止所有的代码。我意识到可能需要一个ModelView文件。目标是给予用户一个模板,让他们可以在不同的视图中进行编辑。

cyej8jka

cyej8jka1#

它不起作用,因为枚举的原始值与您试图显示的图像名称不匹配。因此,您可能至少可以通过以下四种方式解决:
1.更新原始值以反映实际图像名称。
1.更新图像名称以反映原始值。
1.使用枚举值作为要加载的图像的名称。
1.将计算属性添加到枚举中以传递相应的映像名称。
选项3是这样做的:
替换Ìmage(backgroundOptions.rawValue)
关于Image("\(backgroundOptions)")
选项4可以像这样添加到枚举中:

var imageName: String {

    // If the enum values correspond to the names then the
    // implementation can be kept simple. Otherwise, a switch
    // could be used to implement
    "\(self)"
}

。。。然后你这样使用:Image(backgroundOptions.imageName)

相关问题