# Gradient+

[swift](https://lochiwei.gitbook.io/ios/swift)⟩ [custom](https://lochiwei.gitbook.io/ios/custom) ⟩ [extension](https://lochiwei.gitbook.io/ios/custom/ext) ⟩ Gradient + ext

{% hint style="info" %}
custom <mark style="color:orange;">Gradient</mark> extensions.
{% endhint %}

![](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M5-JmwCZMKh_d7RfBaN%2F-MHfQKiaCGO1yfEfFq7n%2F-MHfQybeUcrONgoLhVBh%2Fgradients%202.png?alt=media\&token=5ed65423-3973-4a67-a808-008042e4dbff)

{% tabs %}
{% tab title="👥 相關" %}

* can be applied on [text](https://lochiwei.gitbook.io/ios/swiftui/control/text "mention").
* [gradient](https://lochiwei.gitbook.io/ios/swiftui/shapes/shapestyle/gradient "mention")
  {% endtab %}

{% tab title="💾 程式" %}

```swift
import SwiftUI

extension Gradient {
    
    // general linear gradient ---------------------------
    
    /// `Gradient.linear(from: start, to: end, colors: colors)`
    ///
    /// - Parameters:
    ///   - from: 漸層開始的地方
    ///   - end: 漸層結束的地方
    ///   - colors: 漸層顏色 (`[Color]`)
    public static func linear(
        from start: UnitPoint, 
        to     end: UnitPoint, 
        colors    : [Color]       // use array
    ) -> LinearGradient 
    {
        LinearGradient(
            gradient  : Gradient(colors: colors), 
            startPoint: start, 
            endPoint  : end
        )
    }
    
    /// `Gradient.linear(from: start, to: end, colors: c1, c2, c3)`
    ///
    /// - Parameters:
    ///   - from: 漸層開始的地方
    ///   - end: 漸層結束的地方
    ///   - colors: 漸層顏色 (`Color...`)
    public static func linear(
        from start: UnitPoint, 
        to     end: UnitPoint, 
        colors    : Color...     // use variadic parameter
    ) -> LinearGradient 
    {
        linear(from: start, to: end, colors: colors)
    }
    
    // specialized linear gradients ------------------------
    
    /// `Gradient.down(colors)`
    /// - Parameters:
    ///   - colors: 漸層顏色 (`[Color]`)
    public static func down(_ colors: [Color]) -> LinearGradient {
        linear(from: .top, to: .bottom, colors: colors)
    }
    
    /// `Gradient.down(color1, color2, color3)`
    public static func down(_ colors: Color...) -> LinearGradient {
        down(colors)
    }
    
    /// `Gradient.up(colors)`
    public static func up(_ colors: [Color]) -> LinearGradient {
        linear(from: .bottom, to: .top, colors: colors)
    }
    
    /// `Gradient.up(color1, color2, color3)`
    public static func up(_ colors: Color...) -> LinearGradient {
        up(colors)
    }
    
    
    /// `Gradient.right(colors)`
    /// - Parameters:
    ///   - colors: 漸層顏色 (`[Color]`)
    public static func right(_ colors: [Color]) -> LinearGradient {
        linear(from: .leading, to: .trailing, colors: colors)
    }
    
    /// `Gradient.right(c1, c2, c3)`
    public static func right(_ colors: Color...) -> LinearGradient {
        right(colors)
    }
    
    /// `Gradient.left(colors)`
    public static func left(_ colors: [Color]) -> LinearGradient {
        linear(from: .trailing, to: .leading, colors: colors)
    }
    
    /// `Gradient.left(c1, c2, c3)`
    public static func left(_ colors: Color...) -> LinearGradient {
        left(colors)
    }
    
    
    /// `Gradient.bottomRight(colors)`
    /// - Parameters:
    ///   - colors: 漸層顏色
    public static func bottomRight(_ colors: [Color]) -> LinearGradient {
        linear(from: .topLeading, to: .bottomTrailing, colors: colors)
    }
    
    /// Gradient.bottomRight(color1, color2, color3)
    public static func bottomRight(_ colors: Color...) -> LinearGradient {
        bottomRight(colors)
    }
    
    /// `Gradient.topLeft(colors)`
    public static func topLeft(_ colors: [Color]) -> LinearGradient {
        linear(from: .bottomTrailing, to: .topLeading, colors: colors)
    }
    
    /// `Gradient.topLeft(color1, color2, color3)`
    public static func topLeft(_ colors: Color...) -> LinearGradient {
        topLeft(colors)
    }
    
    
    /// `Gradient.topRight(colors)`
    /// - Parameters:
    ///   - colors: 漸層顏色
    public static func topRight(_ colors: [Color]) -> LinearGradient {
        linear(from: .bottomLeading, to: .topTrailing, colors: colors)
    }
    
    /// Gradient.topRight(color1, color2, color3)
    public static func topRight(_ colors: Color...) -> LinearGradient {
        topRight(colors)
    }
    
    /// Gradient.bottomLeft(colors)
    public static func bottomLeft(_ colors: [Color]) -> LinearGradient {
        linear(from: .topTrailing, to: .bottomLeading, colors: colors)
    }
    
    /// Gradient.bottomLeft(color1, color2, color3)
    public static func bottomLeft(_ colors: Color...) -> LinearGradient {
        bottomLeft(colors)
    }
    
}
```

{% endtab %}

{% tab title="💈 範例" %}

```swift
import SwiftUI
import PlaygroundSupport

struct ContentView: View {
    var body: some View {
        HStack {
            
            Group {
                // ⭐️ custom `Gradient` extension
                Gradient.right(.orange, .red)
                    .watermark("right", .bottom)
                Gradient.down(.green, .blue)
                    .watermark("down", .bottom)
                Gradient.bottomRight(.white, .gray)
                    .watermark("bottomRight", .bottom)
                Gradient.topRight(.yellow, .purple)
                    .watermark("topRight", .bottom)
            } // Group
                .frame(width: 120, height: 120)
                .shadow(radius: 4)
                .border(Color.black)
            
        } // container (HStack)
            .padding(10)
            .background(Color(white: 0.85))
    }
}

PlaygroundPage.current.setLiveView(ContentView())
```

{% endtab %}

{% tab title="📗 參考 " %}

* Sarun ⟩&#x20;
  * [ ] [Gradient in SwiftUI](https://sarunw.com/posts/gradient-in-swiftui/)
  * [ ] [How to render text with a color gradient in SwiftUI](https://sarunw.com/posts/how-to-render-text-with-color-gradient-in-swiftui/)
    {% endtab %}

{% tab title="📘 手冊 " %}

* SwiftUI ⟩ [Drawing and Animation](https://developer.apple.com/documentation/swiftui/drawing-and-animation) ⟩&#x20;
  * [Gradient](https://developer.apple.com/documentation/swiftui/gradient) ⟩
    * [LinearGradient](https://developer.apple.com/documentation/swiftui/lineargradient)&#x20;
  * [Color](https://developer.apple.com/documentation/swiftui/color) ⟩
    * [.gradient](https://developer.apple.com/documentation/swiftui/color/gradient)：standard gradient for the color.
      {% endtab %}
      {% endtabs %}