【问题标题】：Can't change the iOS14 widget background color无法更改 iOS14 小部件背景颜色
【发布时间】：2020-11-11 16:15:54
【问题描述】：

我知道我可以使用以下代码更改 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])
    }
}

但是结果是这样的：

【问题讨论】：

标签： ios widget swiftui background-color

【解决方案1】：

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

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

在您的小部件扩展中转到Assets.xcassets
应该已经有一个名为"WidgetBackground" 的颜色集
如果缺少，则创建一个新的颜色集并将其命名为"WidgetBackground"
转到属性检查器并确保将外观设置为"Any, Dark"

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

转到您的小部件视图并设置其背景颜色.background(Color("WidgetBackground"))

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

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

【讨论】：

【解决方案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")
        }
    }

【讨论】：

【解决方案3】：

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

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

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

【讨论】：

这对我不起作用。它改变了按钮的颜色，但小部件的颜色仍然相同。你能不能也展示一下如何为白天和黑夜设置 2 种颜色？
右边的属性检查器中；您可以选择外观（任何、浅色、深色）
不起作用...如何设置画布颜色？
这似乎不起作用。由于某种原因，如果设置为“无”以外的任何其他内容，则构建失败并显示 Failed to find newest available Simulator runtime

【解决方案4】：

你需要指定全帧，如下例所示

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

【讨论】：

谢谢你的工作。但是我如何定义白天和黑暗模式的颜色呢？你能告诉我如何设置图像而不是颜色吗？
我使用了这个和 WidgetBackround 颜色资源的组合，在为浅色和黑色定义了 WIdgetBackground 颜色之后，在上面的代码中使用 Color("WidgetBackground") 而不是 Color.green。