如何创建依赖视图最终frame的自定义ShapeStyle？

我希望通过自定义ShapeStyle统一应用内视觉风格，但该样式需要依赖视图的最终frame。尝试编写了如下代码，但发现RadialGradient的center支持单位点，而startRadius和endRadius需要绝对值CGFloat，无法直接获取视图的frame：

extension ShapeStyle where Self == RadialGradient {
    public static var special: RadialGradient {
        RadialGradient(
            colors: [Color(.specialStart), Color(.specialEnd)],
            center: .init(x: 0.25, y: 0.25),
            startRadius: frame.width * 0.35,
            endRadius: frame.height * 0.85
        )
    }
}

请问是否有办法创建依赖frame的自定义ShapeStyle？

解决方案 #

由于ShapeStyle的静态属性属于全局上下文，无法直接访问视图实例的frame信息，因此需要通过获取视图尺寸后动态创建渐变的方式实现，以下是两种可行方案：

方案1：封装为ViewModifier（推荐）

通过GeometryReader在Modifier中获取视图尺寸，动态生成渐变背景，使用时只需调用对应的View扩展方法：

struct SpecialGradientModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .background(
                GeometryReader { proxy in
                    RadialGradient(
                        colors: [Color(.specialStart), Color(.specialEnd)],
                        center: .init(x: 0.25, y: 0.25),
                        startRadius: proxy.size.width * 0.35,
                        endRadius: proxy.size.height * 0.85
                    )
                }
            )
    }
}

extension View {
    func specialGradientBackground() -> some View {
        self.modifier(SpecialGradientModifier())
    }
}

使用示例：

Text("示例文本")
    .frame(width: 200, height: 150)
    .specialGradientBackground()

方案2：带参数的ShapeStyle静态方法

如果需要直接在fill等方法中使用，可以定义一个接收尺寸参数的静态方法，结合GeometryReader传递视图尺寸：

extension ShapeStyle where Self == RadialGradient {
    static func special(size: CGSize) -> RadialGradient {
        RadialGradient(
            colors: [Color(.specialStart), Color(.specialEnd)],
            center: .init(x: 0.25, y: 0.25),
            startRadius: size.width * 0.35,
            endRadius: size.height * 0.85
        )
    }
}

使用示例：

GeometryReader { proxy in
    RoundedRectangle(cornerRadius: 16)
        .fill(ShapeStyle.special(size: proxy.size))
}
.frame(width: 200, height: 150)

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