无法更改 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

您还可以使用 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 3

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

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

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

Answer 4

对于那些试图更改支持深色和浅色模式的小部件背景的人。

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

1. 转到Assets.xcassets您的小部件扩展
2. 应该已经有一个带有名称的颜色集"WidgetBackground"
3. 如果丢失，则创建一个新的颜色集并将其命名为"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. 在设备（或模拟器）上编译并运行，并检查当前外观的颜色更新