小组件适配屏幕主题色

iOS 18 新增Home screen Tint Color（色调）选择，用户可以通过以下方式自定义主屏幕颜色，并且小组件、APP 图标也会跟随改变颜色。

如果小组件没有做兼容，就会出现意料之外样式。

白色部分内部应该还有其他显示内容（title和图标）。 而且这里设置的item背景颜色也不是白色（系统会自动设置为白色）。

如果是 accented 模式，小组件背景会自动调整为灰黑色，设置了颜色的地方会自动变为白色（随便你设置什么颜色），标记为 accentable 的组件会按照主题色显示。

小组件兼容

控件支持 Accentable

通过设置widgetAccentable将控件添加到着重组（会使用用户选择的颜色渲染，忽略本身设置的颜色）

var body: some View {
    VStack {
        Text("MON")
            .font(.caption)
            .widgetAccentable()
        Text("6")
            .font(.title)
        }
    }
}

在视图上调用widgetAccentable(true)将其移动到着重组后，在其子视图上调用widgetAccentable(false)不会将子视图移回默认组

图片兼容

借助widgetAccentedRenderingMode设置不同样式

		Image("iconName")
    .resizable()
    .widgetAccentedRenderingMode(.fullColor)

如果需要兼容低版本，可以使用下面扩展

		@ViewBuilder
    func widgetImageAccentedDesaturated() -> some View {
        if Bundle.main.bundlePath.hasSuffix(".appex"){
            if #available(iOS 18.0, *) {
                widgetAccentedRenderingMode(.accented) // 或.accentedDesaturated
            } else {
             	self // 必须返回，否则低版本没有控件显示。
             }
        } else {
        	self
        }
    }

widgetRenderingMode深层次定制

widgetRenderingMode,可以动态获取当前模式，根据条件配置不同的样式。

struct ItemView: View {
    @Environment(\.widgetRenderingMode) private var widgetRenderingMode
}

但是并不能在 accented 模式显示其他颜色。但是可以设置透明度。

最佳方案

借助 widgetRenderingMode 在accented模式下，设置颜色透明度，来完成不同层次的显示。

比如：

参考

widgetaccentable – Apple Document

WidgetRenderingMode – Apple Document

iOS 18 小部件：添加对色调的支持 – Medium

How to support tinted home screen widgets in iOS 18