英文:

How to remove padding around the content view and let the content view fill the entire area in Widget iOS 17+?

问题 {#heading}

我尝试使用.ignoresSafeArea()，但不起作用。

在iOS 16及早期版本中，内容视图周围没有填充。

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

    init() {
        //设置 firebase
        FirebaseApp.configure()
    }
    
    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            Rectangle()
                .foregroundStyle(Color.primary)
                .ignoresSafeArea() // 不起作用
                .containerBackground(.accent, for: .widget)
            
        }
        .contentMarginsDisabled()
        .configurationDisplayName("我的小部件")
        .description("这是一个示例小部件。")
    }
}

英文:

I tried using .ignoresSafeArea() , but did not work.

There were not a padding in iOS 16 and early versions around the content view.

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.")
    }
}

答案1 {#1}

得分: 1

是的，小部件中的安全区域已被内容边距取代。这意味着像ignoresSafeArea这样的修饰符在小部件中不再起作用。

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

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

    init() {
        //设置Firebase
        FirebaseApp.configure()
    }
    
    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            Rectangle()
                .foregroundStyle(Color.primary)
                .containerBackground(.accent, for: .widget)
        }
        .contentMarginsDisabled() // 此处
        .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) // 如果您需要边距
    }
}

内容边距 {#heading-1}

内容边距是自动应用于您的小部件主体的填充，以防止您的内容过于靠近小部件容器的边缘。这些边距可能会因显示小部件的环境而有所不同。 英文:

Yes, Safe areas in widgets have been replaced by the use of content margins. This means that modifiers like ignoresSafeArea no longer have any effect in widgets.

you can still achieve this same effect by adding the contentMarginsDisabled modifier to your widget configuration.

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.")
    }
}

NOTE:
for any content which should remain within the default content margins, simply add padding back in. You can use the widgetContentMargins environment variable to get the default margins for the current environment.

Ex:

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 
    }
}

Content Margin {#content-margin}

Content margins are padding which is automatically applied to your widget's body, preventing your content from getting to close to the edge of the widget container. These margins may be larger or smaller, depending on the environment where your widget is being shown.