Как дать UIButton градиент и дать этой кнопке нижнюю тень с таким же градиентом в SwiftUI?
Так что мой друг, дизайнер, сделал мне макет для генератора паролей, я собираюсь сделать https://imgur.com/gallery/LZNNrWj и я не знаю, как кодировать этот градиент, используя SwiftUI, градиент кнопка #41A5ED -> #3099D8 и идет в этом направлении (см. рисунок) https://imgur.com/gallery/2rd7Iix вверху слева # 41A5ED, а справа внизу #3099D8. Я также хочу дать этой кнопке нижнюю тень, такую как https://imgur.com/gallery/gEmBJ1w с тем же градиентом, что и у кнопки. Если у вас есть идеи, как мне поступить, пожалуйста, дайте мне знать, потому что я полностью потерян.
3 ответа
Вы можете сделать это так:
Button(action: createTask) {
Text(“MyButton“)
.color(.white)
.font(Font.system(size: 17))
.frame(height: 56)
.frame(minWidth: 0, maxWidth: .infinity)
.background(LinearGradient.actionButton, cornerRadius: 28)
.shadow() // configure shadow as you want
}
И просто для улучшения читабельности кода я создал градиент отдельно:
fileprivate extension LinearGradient {
static let actionButton = LinearGradient(gradient: Gradient(colors: [Color(“ActionGradientFirst”), Color(“ActionGradientSecond”)]),
startPoint: .topLeading,
endPoint: .bottomTrailing)
}
Цвета ActionGradientFirst
а также ActionGradientSecond
Я объявил в Assets.xcasset
Немного поздно, но на случай, если это кому-то поможет.
ZStack{
LinearGradient(
gradient: .init(colors: [Color.white, Color.blue.opacity(0.66)]),
startPoint: .init(x: 0.0, y: 0.0),
endPoint: .init(x: 0.75, y: 0.75)
)
.mask(
RoundedRectangle(cornerRadius: 15)
.frame(width: 120, height: 45, alignment: .center)
.blur(radius: 10)
)
.padding(.top, 20)
Button(action: {}, label: {
Text("Siguiente")
.font(.custom("Avenir-Heavy", size: 20))
.padding(.top, 10)
.padding(.bottom, 10)
.padding(.leading, 16)
.padding(.trailing, 16)
})
.foregroundColor(.white)
.background(
LinearGradient(
gradient: .init(colors: [Color.white, Color.blue.opacity(0.75)]),
startPoint: .init(x: -0.33, y: -0.33),
endPoint: .init(x: 0.66, y: 0.66)
))
.clipShape(RoundedRectangle(cornerRadius: 15))
.buttonStyle(PlainButtonStyle())
}
.frame(height: 100)
Сначала создайте градиент, используя следующий метод,
let gradientLayer = CAGradientLayer()
gradientLayer.colors = [UIColor.red.cgColor, UIColor.black.cgColor]
gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 1, y: 1)
gradientLayer.frame = view.bounds
Затем просто примените его к любому представлению, которое вы хотите,
view.layer.addSublayer(gradientLayer)
Чтобы добавить тень,
let shadowPath = UIBezierPath(rect: view.bounds)
view.layer.masksToBounds = false
view.layer.shadowColor = UIColor.grey.cgColor
view.layer.shadowOffset = CGSize(width: 0, height: 0.5)
view.layer.shadowOpacity = 0.2
view.layer.shadowPath = shadowPath.cgPath