为啥 SwiftUI 教程中没有显示 Image 对象？

Posted 2023-02-24

【中文标题】为啥 SwiftUI 教程中没有显示 Image 对象？

【英文标题】：Why are Image objects not showing up from a SwiftUI tutorial?为什么 SwiftUI 教程中没有显示 Image 对象？

【发布时间】：2020-08-20 17:38:38

【问题描述】：

我一直在尝试将布局更改为 Apple 提供的用于为手表制作 SwiftUI 应用程序 (https://developer.apple.com/tutorials/swiftui/creating-a-watchos-app) 的 WatchLandmarks 教程，但我无法弄清楚为什么没有为我加载图像。它在完成的教程代码中运行良好，唯一的区别在于我对 LandmarkList 和 LandmarkRow 布局的更改。

对 LandmarkList 的更改：

struct LandmarkList<DetailView: View>: View 
    @EnvironmentObject private var userData: UserData
    
    let detailViewProducer: (Landmark) -> DetailView
    
    var body: some View 
        VStack(alignment: .leading)
            Text(" Landmarks")
                .font(.system(size: 16))
            ScrollView(.horizontal, showsIndicators:false)
                HStack(alignment: .center)
                    ForEach(userData.landmarks)  landmark in
//                        if !self.userData.showFavoritesOnly || landmark.isFavorite 
                            NavigationLink(
                                destination: self.detailViewProducer(landmark).environmentObject(self.userData)) 
                                LandmarkRow(landmark: landmark)
                                    .frame( maxWidth: 70, maxHeight: 70, alignment: .leading)
                            
//                        
                    
                
                
            .frame(minWidth: 0, maxWidth: .infinity, maxHeight: 100, alignment: .center)//.frame(width:150, height: 100)
            Text(self.userData.landmarks[0].name)
                .frame(minWidth: 0, maxWidth: .infinity, minHeight: 24, alignment: .center)
            HStack(spacing: 32)
                Button(action:  print("first button") ) 
                    Text("P")
                .frame(minWidth: 20, maxWidth:50, minHeight: 20, maxHeight:50)
                    .background(Color.orange)
                    .clipShape(Circle())
                    .overlay(Circle().stroke(Color.clear, lineWidth: 4))
                    .shadow(radius: 10)
                Button(action:  print("second button")  ) 
                    Text("S")
                .frame(minWidth: 20, maxWidth:50, minHeight: 20, maxHeight:50)
                    .background(Color.orange)
                    .clipShape(Circle())
                    .overlay(Circle().stroke(Color.clear, lineWidth: 4))
                    .shadow(radius: 10)
            .frame(minWidth: 0, maxWidth: .infinity, maxHeight: 100, alignment: .center)
//        List 
//            Toggle(isOn: $userData.showFavoritesOnly) 
//                Text("Show Favorites Only")
//            
//
//            ForEach(userData.landmarks)  landmark in
//                if !self.userData.showFavoritesOnly || landmark.isFavorite 
//                    NavigationLink(
//                    destination: self.detailViewProducer(landmark).environmentObject(self.userData)) 
//                        LandmarkRow(landmark: landmark)
//                    
//                
//            
//        
//        .navigationBarTitle(Text("Landmarks"))
        .frame(maxWidth: .infinity, minHeight:200, maxHeight: .infinity, alignment: .leading)
    

对 LandmarkRow 的更改

struct LandmarkRow: View 
    var landmark: Landmark

    var body: some View 
        HStack 
            landmark.image
                .resizable()
                .frame(width: 50, height: 50)
                .cornerRadius(8.0)
//            Text(landmark.name)
//            Spacer()
//
//            if landmark.isFavorite 
//                Image(systemName: "star.fill")
//                    .imageScale(.medium)
//                    .foregroundColor(.yellow)
//            
        
    

我做错了什么？

【参考方案1】：

尝试在图片上调用.renderingMode(.original)。

您的图片资源有两种渲染模式：

原创 模板

原始模式将按原样描绘图像资源，而模板模式会将图像的所有不透明部分转换为您可以设置的一种颜色。默认颜色为黑色。 注意：Apple 文档中没有可用的概述。 在本教程中，您将了解 SwiftUI 中的渲染模式是什么以及如何使用它。

【讨论】：

他们的作品，谢谢！为什么我必须这样做？

没有太多关于它的文档，但请查看我更新的答案。

@Jargen89 您应该使用可调整大小的矢量资产，因此您的 SwiftUI 应用程序将在不同的设备尺寸上正确缩放（想想 iPhone、iPad 和 MacOS Catalyst 应用程序）。并且您应该根据明/暗模式对其进行着色。

谢谢大家，我很感激。