如何删除内容视图周围的填充并让内容视图填充 Widget iOS 17+ 和 MacOS Sonoma 中的整个区域？

Question

我尝试使用.ignoresSafeArea() ，但没有成功。

iOS 16 和早期版本中的内容视图周围没有填充。

struct CommonDailyEyeTipsWidget: Widget {
    let kind: String = "CommonDailyEyeTipsWidget"

    init() {
        //setup firebase
        FirebaseApp.configure()
    }
    
    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            Rectangle()
                .foregroundStyle(Color.primary)
                .ignoresSafeArea() // Does not work
                .containerBackground(.accent, for: .widget)
            
        }
        .contentMarginsDisabled()
        .configurationDisplayName("My Widget")
        .description("This is an example widget.")
    }
}

Answer 1

是的，小部件中的安全区域已被内容边距的使用所取代。这意味着像ignoresSafeArea这样的修饰符在小部件中不再有任何效果。

您仍然可以通过将 contentMarginsDisabled 修饰符添加到小部件配置中来实现相同的效果。

struct CommonDailyEyeTipsWidget: Widget {
    let kind: String = "CommonDailyEyeTipsWidget"

    init() {
        //setup firebase
        FirebaseApp.configure()
    }
    
    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            Rectangle()
                .foregroundStyle(Color.primary)
                .containerBackground(.accent, for: .widget)
        }
        .contentMarginsDisabled() // Here
        .configurationDisplayName("My Widget")
        .description("This is an example widget.")
    }
}

注意：对于任何应保留在默认内容边距内的内容，只需重新添加填充即可。您可以使用 widgetContentMargins 环境变量来获取当前环境的默认边距。

前任：

struct CommonDailyEyeTipsWidgetEntryView : View {
    @Environment(\.widgetContentMargins) var margins
    
    var entry: Provider.Entry
    
    var body: some View {
        Rectangle()
            .foregroundStyle(Color.primary)
            .padding(margins) // If you want a margin 
    }
}

内容边距

内容边距是自动应用于小部件主体的填充，可防止您的内容接近小部件容器的边缘。这些边距可能更大或更小，具体取决于显示小部件的环境。

Answer 2

此外，由于自 iOS 17 以来就出现了边距，因此如果您需要支持较低版本并完全禁用边距，则可以使用此扩展。

extension WidgetConfiguration {
    func disableContentMarginsIfNeeded() -> some WidgetConfiguration {
        if #available(iOSApplicationExtension 17.0, *) {
            return self.contentMarginsDisabled()
        } else {
            return self
        }
    }
}

使用示例：

struct CustomWidget: Widget {
    private let kind: String = "CustomWidget"
    
    var body: some WidgetConfiguration {
        IntentConfiguration(kind: kind,
                            intent: YourCustomIntent.self,
                            provider: YourCustomTimelineProvider()) { entry in
            YourCustomView(entry: entry)
        }
        .configurationDisplayName("Name of widget")
        .description("Description")
        .disableContentMarginsIfNeeded() // add to your widget configuration
    }
}