Как дать UIButton градиент и дать этой кнопке нижнюю тень с таким же градиентом в SwiftUI? - PullRequest
Новая
       16

Как дать UIButton градиент и дать этой кнопке нижнюю тень с таким же градиентом в SwiftUI?

0 голосов
/ 09 июня 2019

Итак, мой друг, дизайнер, сделал мне макет для генератора паролей, я собираюсь сделать https://imgur.com/gallery/LZNNrWj, и я не знаю, как кодировать этот градиент, используя SwiftUI, градиенткнопка # 41A5ED -> # 3099D8 и идет в этом направлении (см. рисунок) https://imgur.com/gallery/2rd7Iix слева вверху # 41A5ED и справа внизу # 3099D8.Я также хочу дать этой кнопке нижнюю тень, такую ​​как https://imgur.com/gallery/gEmBJ1w с тем же градиентом, что и у кнопки.Если у вас есть идеи, как мне поступить, пожалуйста, дайте мне знать, потому что я полностью потерян.

Ответы [ 2 ]

0 голосов
/ 10 июня 2019

Сначала создайте градиент, используя следующий метод, 

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
0 голосов
/ 10 июня 2019

Вы можете сделать это так: 

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

...