Apple 的 SwiftUI 教程代码不显示自制副本中的视图内容

Question

我刚刚开始学习 SwiftUI，按照此链接上的 Apple 教程构建 iOS 应用程序。我从提供的框架应用程序开始，并在最新的 Xcode 中一步步进行操作。没有看到我应该看到的内容，而是CardView仅显示一个空白的白色矩形。

苹果提供了一个完整的项目，运行得很好。我将我从框架项目构建的代码与已完成的项目附带的代码进行了比较，它们看起来是相同的。然而，我自制的项目副本根本没有填写CardView. 没有颜色、文本或图标，只有一个空白的白色矩形。除了简单地将代码与固定示例进行比较之外，我完全不知道如何调试它。欢迎任何建议。

这是 CardView.swift 的代码：

import SwiftUI

struct CardView: View {
    let scrum: DailyScrum
    var body: some View {
        VStack(alignment: .leading) {
            Text(scrum.title).font(.headline)
            Spacer()
            HStack {
                Label("\(scrum.attendees.count)", systemImage: "person.3")
                    .accessibilityElement(children: .ignore)
                    .accessibilityLabel(Text("Attendees"))
                    .accessibilityValue(Text("\(scrum.attendees.count)"))
                Spacer()
                Label("\(scrum.lengthInMinutes)", systemImage: "clock")
                    .padding(.trailing, 20)
                    .accessibilityElement(children: .ignore)
                    .accessibilityLabel(Text("Meeting length"))
                    .accessibilityValue(Text("\(scrum.lengthInMinutes) minutes"))
            }
            .font(.caption)
        }
        .padding()
        .foregroundColor(scrum.color.accessibleFontColor)

    }
}

struct CardView_Previews: PreviewProvider {
    static var scrum = DailyScrum.data[0]
    static var previews: some View {
        CardView(scrum: scrum)
            .background(scrum.color)
            .previewLayout(.fixed(width: 400, height: 60))
    }
}

这是我在 Xcode 预览中从代码中看到的图像：

这是我在 Xcode 预览中从 Apple 已经完成的示例代码中看到的代码：

将我构建的代码与 Apple 提供的代码进行比较会突出问题，这似乎是合理的，但出现了零差异。项目中的其他两个视图工作正常。除了这个来源之外，还有其他重要的模块吗CardView.swift？

Answer 1

我遇到了同样的问题，发现我错过了教程的“创建卡片视图 -> 第 1 部分：创建颜色主题”部分中的第 5 步

对于不熟悉 Xcode 的人来说，我认为此步骤中的说明不是很清楚。我通过从示例项目的下载版本导入资源解决了这个问题。尝试这些步骤

• 在 Xcode 中打开资源文件
• 右键单击并选择导入
• 导航到下载的项目并选择“Themes”目录，它是 Assets.xcassets 的子目录

完成后，您的资产文件应如下所示。作为奖励，您可以使用这些相同的步骤来导入应用程序图标。

Answer 2

了解问题

1. scrum.color.accessibleFontColor应用于foregroundColor卡的。因此所有标签、图像和文本等都会受到影响。

2. accessibleFontColor似乎返回black或white根据父颜色（scrum.color在本例中）

3. 似乎Color("Design")您正在传递预览正在返回颜色，因为启动项目中的资源中clear没有具有该名称的颜色。Design因此预览显示默认的白色作为卡片背景。但它也使用white前景颜色。所以您会在结果中看到一张纯白色卡片。

解决方案

• 注释掉 .foregroundColor(scrum.color.accessibleFontColor)

• 或者添加资产颜色并按预期命名。

• 或者给卡片添加手动背景

• 或者下载完整版本并将该过程逆向执行到您所在的位置。