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

Question

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

background(Color.red)

这将将视图的背景颜色更改为红色。您可以替换Color.red以使用其他颜色，例如Color.blue或Color.green。

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

但结果像这样：

- Ahmadreza

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])

- Asperi

---

谢谢，那个方法可行。但是我如何定义白天和黑夜模式的颜色？您能告诉我如何设置图像而不是颜色吗？ - submariner

我使用这个和WidgetBackround颜色资源的组合，在定义了浅色和黑色的WIdgetBackground颜色之后，使用Color("WidgetBackground")代替上面代码中的Color.green。 - Phuah Yee Keat

Answer 2

对于那些希望更改小部件背景以支持暗色和亮色模式的人。

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

1. 进入您的小部件扩展中的Assets.xcassets
2. 应该已经有一个名称为"WidgetBackground"的颜色集合
3. 如果缺少，请创建一个新的颜色集合并将其命名为"WidgetBackground"
4. 进入属性检查器，确保外观设置为"Any, Dark"

5. 进入您的小部件扩展的构建设置并搜索资源目录编译器-选项
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. 编译并在设备（或模拟器）上运行，检查颜色更新到当前外观

- choofie

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

- Matias Contreras

---

这似乎是“最正确”的。它简单而且逻辑清晰。不过，我会考虑交换Z和V的stack位置，写成：ZStack { Color.black.ignoresSafeArea() VStack { //widget content goes here } } - Hudon

Answer 4

如果您想更改小部件的背景颜色，您应该修改Assets.xcassets。小部件目标中的Assets.xcassets具有名为“WidgetBackground”的Color Set。更改“WidgetBackground”颜色不仅会更改小部件的背景颜色，还会更改显示在小部件库中的添加按钮的背景颜色。

- shtnkgm

---

对我来说这个没有起到作用。它改变了按钮的颜色，但是部件的颜色仍然相同。您能否也展示一下如何设置白天和黑夜两种颜色？ - submariner

这在属性检查器中的右侧；您可以选择外观（任何，浅色，深色）。 - smat88dd

不起作用...你如何设置画布颜色？ - AndiAna

这似乎不起作用。任何设置除了“无”之外，构建都会失败，并显示“无法找到最新可用模拟器运行时”。 - Romuald Brunet

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

- Pytan