watchOS 10 Widget扩展中如何为accessoryCorner添加图片？

我尝试为.accessoryCorner编写的代码如下：

if #available(watchOS 10.0, *) {
    Image.briefcase
        .resizable()
        .frame(width: 30, height: 30)
        .widgetCurvesContent()
        .widgetLabel("28h 18' +15'")
        .widgetBackground(backgroundColor)
        .widgetURL(URL(string: "widget-currentmonth://?action=currentmonth"))
}

对应的Image扩展定义：

extension Image {
    static var briefcase: Image {
        Image(systemName: "briefcase.fill")
    }
}

当前显示效果：

目标线性版本显示效果：

需求：需要在accessoryCorner中实现与线性版本一致的图标和文本显示，但当前实现无效。

解决方案 #

.accessoryCorner组件有严格的布局规范，你的写法不符合它的视图结构要求，调整代码如下：

if #available(watchOS 10.0, *) {
    AccessoryCornerWidget {
        Label {
            Text("28h 18' +15'")
                .font(.caption)
        } icon: {
            Image.briefcase
                .font(.title)
        }
        .widgetBackground(backgroundColor)
        .widgetURL(URL(string: "widget-currentmonth://?action=currentmonth"))
    }
}

核心调整说明 #

• 必须用AccessoryCornerWidget作为角组件的顶层容器，它是watchOS 10专为角位置组件设计的布局容器。
• 使用Label组合图标与文本是角组件支持的唯一有效方式，直接给Image添加.widgetLabel()修饰符不会被正确解析。
• 移除.widgetCurvesContent()，该修饰符仅适用于.accessoryCircular等曲线型组件，角组件不兼容。
• 图标大小通过font()修饰符控制，比手动设置frame更适配组件的自动布局规则，避免显示异常。

内容的提问来源于stack exchange，提问作者kunass2