iOS 16锁屏矩形圆角配件Widget点击高亮异常求助

问题根源：矩形Widget的默认点击响应区域是原始直角矩形范围，即便你给背景设置了圆角，点击事件仍会触发圆角外的透明区域，导致系统显示半透明白色高亮；而圆形Widget的点击区域本身与背景形状匹配，因此无此问题。

解决方法 #

方法1：匹配点击响应区域与背景形状

给背景视图添加contentShape，让点击响应范围和胶囊状背景一致，这样点击圆角外的透明区域就不会触发高亮了：

private var backgroundView: some View {
    GeometryReader { geometry in
        AccessoryWidgetBackground()
            .cornerRadius(geometry.size.height / 2.0)
            .contentShape(RoundedRectangle(cornerRadius: geometry.size.height / 2.0))
    }
}

方法2：裁剪视图+匹配点击区域

如果方法1效果不佳，可尝试用clipShape替代cornerRadius，同时配合contentShape，确保视图显示和点击区域都被限定为胶囊形状：

private var backgroundView: some View {
    GeometryReader { geometry in
        AccessoryWidgetBackground()
            .clipShape(RoundedRectangle(cornerRadius: geometry.size.height / 2.0))
            .contentShape(RoundedRectangle(cornerRadius: geometry.size.height / 2.0))
    }
}

方法3：针对Widget类型区分处理

如果不想修改圆形Widget的现有逻辑，可以通过环境变量判断Widget类型，仅给矩形Widget添加点击区域限制：

private var backgroundView: some View {
    GeometryReader { geometry in
        AccessoryWidgetBackground()
            .cornerRadius(geometry.size.height / 2.0)
            .modifier(WidgetContentShapeModifier())
    }
}

private struct WidgetContentShapeModifier: ViewModifier {
    @Environment(\.widgetFamily) var widgetFamily
    
    func body(content: Content) -> some View {
        if widgetFamily == .accessoryRectangular {
            content.contentShape(RoundedRectangle(cornerRadius: UIScreen.main.bounds.height / 2.0))
        } else {
            content
        }
    }
}

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