无法更改iOS14小部件背景颜色

Question

我知道我可以使用以下代码更改 SwiftUI 中的视图背景颜色：

.background(Color(.systemGroupedBackground))

但我无法为小部件背景颜色本身做到这一点！

我使用这个代码：

struct XWidget: Widget { // MARK: Widget is defined here
    var body: some WidgetConfiguration {
        StaticConfiguration(
            kind: "xWidget",
            provider: xProvider(),
            placeholder: Text("Loading...")) { entry in
            xWidgetEntryView(entry: entry).background(Color(.systemGroupedBackground)) // <= here
        }.supportedFamilies([.systemSmall, .systemMedium, .systemLarge])
    }
}

但是结果是这样的：

Answer 1

您需要指定全画幅，如下面的演示所示

StaticConfiguration(
    kind: "xWidget",
    provider: xProvider(),
    placeholder: Text("Loading...")) { entry in
    xWidgetEntryView(entry: entry)
       .frame(maxWidth: .infinity, maxHeight: .infinity)    // << here !!
       .background(Color.green)
}.supportedFamilies([.systemSmall, .systemMedium, .systemLarge])

Answer 2

对于那些尝试更改支持dark和light模式的小部件背景的人。

更改小部件背景颜色（支持深色模式）

1. 转到

   Widget Extension

   中的 Assets.xcassets
2. 应该有一个颜色集，其名称为

   "WidgetBackground"

3. 如果丢失，则创建一个新的 Color Set 并将其命名为

   "WidgetBackground"

4. 转到属性检查器并确保外观设置为

   "Any, Dark"

5. 转到您的Widget Extension的Build Settings并搜索Asset Catalog Compiler - Options
6. 确保小部件背景颜色名称设置为颜色集“WidgetBackground”的名称

7. 转到您的小部件视图并设置其背景颜色

   .background(Color("WidgetBackground"))

public var body: some WidgetConfiguration {
    StaticConfiguration(kind: kind, provider: MyCustomTimeline()) { entry in
        MyCustomWidgetView(entry: entry)
            .background(Color("WidgetBackground"))
    }
}

8. 在设备（或模拟器）上编译并运行并检查当前外观的颜色更新

Answer 3

您还可以使用 ZStack 在小部件视图中设置颜色，如下所示：

var body: some View {
        
       VStack {
            ZStack {
                Color.black
                    .ignoresSafeArea()
                Link(destination: Deeplink.image.url!) {
                    Image("exampleImage")
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .padding(.vertical, 3)
                }
            }
            Text("Example text")
        }
    }

Answer 4

如果你想改变你的小部件的背景颜色，你应该修改你的Assets.xcassets。

Widget 目标中的 Assets.xcassets 有一个名为“WidgetBackground”的颜色集。

更改“WidgetBackground”颜色不仅会更改您的小部件的背景颜色，还会更改出现在小部件库中的小部件的添加按钮的背景颜色。

Answer 5

在 iOS 17+ 中，containerBackground(_:for:) 可用。

public var body: some WidgetConfiguration {
    StaticConfiguration(kind: kind, provider: MyCustomTimeline()) { entry in
        MyCustomWidgetView(entry: entry)
            .containerBackground(.red.tertiary, for: .widget)
    }
}