ios - 在设备或模拟器上构建时 SwiftUI WidgetKit 为空

Question

最近在玩 SwiftUI 和 WidgetKit，遇到了一个棘手的问题。我的 WidgetKit 似乎可以在 SwiftUI Canvas 中运行，但在模拟器或设备上构建时它完全是空的。

图片:

在 SwiftUI Canvas 中:

https://github.com/beanut/images/blob/main/Screenshot%202020-12-19%20at%204.00.57%20PM.png?raw=true

在设备上构建时:

https://github.com/beanut/images/blob/main/Screenshot%202020-12-19%20at%204.01.13%20PM.png?raw=true

我的代码:

'''
 import WidgetKit
import SwiftUI
import Intents

struct Provider: IntentTimelineProvider {
    func placeholder(in context: Context) -> SimpleEntry {
        SimpleEntry(date: Date())
    }
    
    func getSnapshot(for configuration: ConfigurationIntent, in context: Context, completion: @escaping (SimpleEntry) -> ()) {
        let entry = SimpleEntry(date: Date())
        completion(entry)
    }
    
    func getTimeline(for configuration: ConfigurationIntent, in context: Context, completion: @escaping (Timeline<Entry>) -> ()) {
        var entries = [SimpleEntry]()
        let currentDate = Date()
        let midnight = Calendar.current.startOfDay(for: currentDate)
        let nextMidnight = Calendar.current.date(byAdding: .day, value: 1, to: midnight)!
        //To refresh timeline every min
        for offset in 0 ..< 60 * 24 {
            let entryDate = Calendar.current.date(byAdding: .minute, value: offset, to: midnight)!
            entries.append(SimpleEntry(date: entryDate))
        }
        
        let timeline = Timeline(entries: entries, policy: .after(nextMidnight))
        completion(timeline)
    }
}

struct SimpleEntry: TimelineEntry {
    let date: Date
}

struct WidgetEntryView : View {
    var entry: Provider.Entry
    
    var body: some View {
            HStack() {
                VStack {
                    Spacer()
                    VStack(alignment: .leading) {
                        Text(DateManager().getDayOfWeekInString(date: entry.date)!)
                            .font(Font(UIFont(name: "HoeflerText-Italic", size: 44)!))
                            .foregroundColor(.white)
                            .multilineTextAlignment(.trailing)
                            .opacity(1)
                        Text("\(DateManager().getDayAsString(date: entry.date)) \(DateManager().monthAsString(date: entry.date))")
                            .font(Font(UIFont(name: "Copperplate", size: 26)!))
                            .multilineTextAlignment(.trailing)
                            .opacity(1)
                            .foregroundColor(.gray)
                    }
                }
                .padding(.leading, 20)
                .padding(.bottom, 20)
                Spacer()
                VStack(alignment: .trailing, spacing: -20) {
                    Text(DateManager().getHour(date: entry.date))
                        .font(Font(UIFont(name: "Copperplate-Bold", size: 86)!))
                        .foregroundColor(.white)
                        .multilineTextAlignment(.trailing)
                        .opacity(1)
                    Text(DateManager().getMinuteWithTwoDigits(date: entry.date))
                        .font(Font(UIFont(name: "Copperplate-Bold", size: 86)!))
                        .multilineTextAlignment(.trailing)
                        .opacity(1)
                        .foregroundColor(.gray)
                }
                .padding(.trailing, 15)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Image(uiImage: #imageLiteral(resourceName: "moon")), alignment: .center)
    }
}

@main
struct Widget: SwiftUI.Widget {
    let kind: String = "Widget"
    
    var body: some WidgetConfiguration {
        IntentConfiguration(kind: kind, intent: ConfigurationIntent.self, provider: Provider()) { entry in
            WidgetEntryView(entry: entry)
        }
        .configurationDisplayName("TestWidget")
        .description("This is an example widget.")
    }
}

struct Widget_Previews: PreviewProvider {
    static var previews: some View {
        WidgetEntryView(entry: SimpleEntry(date: Date()))
            .previewContext(WidgetPreviewContext(family: .systemMedium))
    }
}

'''

**更新我注意到如果我删除 VStack， WidgetKit 确实会显示。但是如果我把代码加回去，它不会显示。移除 VStack:

struct WidgetEntryView : View {
    var entry: Provider.Entry
    
    var body: some View {
            HStack() {
//                VStack {
//                    Spacer()
//                    VStack(alignment: .leading) {
//                        Text(DateManager().getDayOfWeekInString(date: entry.date)!)
//                            .font(Font(UIFont(name: "HoeflerText-Italic", size: 44)!))
//                            .foregroundColor(.white)
//                            .multilineTextAlignment(.trailing)
//                            .opacity(1)
//                        Text("\(DateManager().getDayAsString(date: entry.date)) \(DateManager().monthAsString(date: entry.date))")
//                            .font(Font(UIFont(name: "Copperplate", size: 26)!))
//                            .multilineTextAlignment(.trailing)
//                            .opacity(1)
//                            .foregroundColor(.gray)
//                    }
//                }
//                .padding(.leading, 20)
//                .padding(.bottom, 20)
                Spacer()
                VStack(alignment: .trailing, spacing: -20) {
                    Text(DateManager().getHour(date: entry.date))
                        .font(Font(UIFont(name: "Copperplate-Bold", size: 86)!))
                        .foregroundColor(.white)
                        .multilineTextAlignment(.trailing)
                        .opacity(1)
                    Text(DateManager().getMinuteWithTwoDigits(date: entry.date))
                        .font(Font(UIFont(name: "Copperplate-Bold", size: 86)!))
                        .multilineTextAlignment(.trailing)
                        .opacity(1)
                        .foregroundColor(.gray)
                }
                .padding(.trailing, 15)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            .background(Image(uiImage: #imageLiteral(resourceName: "moon")), alignment: .center)
    }
}

它确实显示了 UI 元素: https://github.com/beanut/images/blob/main/IMG_002DAA718D1C-1.jpeg?raw=true

请帮助我并提前致谢:)!

Answer 1

我偶然发现了这个问题，试图为自己找到解决同样问题的方法，并找到了解决方案。

我不认为 VStack 是这里的问题，而是强制展开其中 UI 元素的一个或多个值，例如在这一行中:

Text(DateManager().getDayOfWeekInString(date: entry.date)!)

强制展开 nil 值是我停止为所有尺寸绘制 WidgetKit UI 的原因。尝试以安全的方式展开值或通过零合并提供回退。