[iOS - SwiftUI] Gradients (Linear, Angular, Radial) 사용 방법

목차) SwiftUI의 기본 - 목차 링크

Gradients (Linear, Angular, Radial)

이전 포스팅 글, Swift에서 알아본 CAGradientLayer와 개념은 동일하며, SwiftUI에서는 각 속성이 더 직관적인 이름으로 변경

• axial(linear) -> Linear
• radial(circle) -> Radial
• conic(sweep) -> Angular

https://ios-development.tistory.com/935

LinearGradient

• 요소
  • 색상 입력 - colors
  • 시작 지점 - startPoint
  • 종료 지점 - endPoint

@available(iOS 13.0, macOS 10.15, tvOS 13.0, watchOS 6.0, *)
@frozen public struct LinearGradient : ShapeStyle, View {
    public init(gradient: Gradient, startPoint: UnitPoint, endPoint: UnitPoint)
    public init(colors: [Color], startPoint: UnitPoint, endPoint: UnitPoint)
    public init(stops: [Gradient.Stop], startPoint: UnitPoint, endPoint: UnitPoint)
    public typealias Body
}

• UnitPoint는 9가지의 지점

https://www.sagarunagar.com/Understanding-gradients-using-SwiftUI/

• LinearGradient

LinearGradient(colors: [.blue, .orange], startPoint: .topLeading, endPoint: .bottomTrailing)
  .overlay(Text("LenarGradient"))

RadialGradient

• 요소
  • 색상 입력 - colors
  • 중앙 지점 - center
  • 시작 각도 - startRadius
  • 종료 각도 - endRadius

RadialGradient(colors: [.blue, .orange], center: .center, startRadius: 0, endRadius: 270)
  .overlay(Text("RadialGradient"))

AngularGradient

요소

• 색상 입력 - colors
• 중앙 지점 - center

AngularGradient(colors: [.blue, .orange], center: .center)
  .overlay(Text("AngularGradient"))

* 전체 코드: https://github.com/JK0369/ExGradient-SwiftUI

* 참고

https://www.sagarunagar.com/Understanding-gradients-using-SwiftUI/