Вы можете создать собственную ButtonStyle
реализацию, которая может выглядеть так:
struct GradientButtonStyle: ButtonStyle {
private struct GradientButtonPreferenceKey: PreferenceKey {
static var defaultValue: CGSize = .zero
static func reduce(value: inout CGSize, nextValue: () -> CGSize) { }
}
@State private var buttonSize: CGSize = .zero
func makeBody(configuration: Configuration) -> some View {
configuration.label
.padding()
.background(.white)
.clipShape(RoundedRectangle(cornerRadius: 10))
.overlay {
GeometryReader { proxy in
Color.clear
// Getting current size of button
.preference(key: GradientButtonPreferenceKey.self, value: proxy.size)
}
}
.background {
Rectangle()
// We'll use Linear gradient with three colors I can see in your example.
.fill(LinearGradient(colors: [.yellow, .purple, .blue],
startPoint: .leading,
endPoint: .trailing))
// You can adjust gradient size by multilplying its value on desired factor here
.frame(width: buttonSize.width, height: buttonSize.height)
// Higher the number further from body gradient will be "sprayed".
.blur(radius: 30)
// Makes cool effect of pressing the button.
.opacity(configuration.isPressed ? 0.7 : 1)
}
.onPreferenceChange(GradientButtonPreferenceKey.self, perform: { value in
buttonSize = value
})
}
}
И после использования стиля:
Button("Custom Gradient Button") {}
.buttonStyle(GradientButtonStyle())
Вы получаете результат:
ПРИМЕЧАНИЕ. После размытия градиента невозможно (по крайней мере, я не знаю способа) получить рамку «распыленной» области, поэтому все пробелы, отступы и так далее. Будет рассчитываться на основе тела кнопки, в данном случае — белого прямоугольника.
Что вы уже пробовали?