🔴Gradient

💈 範例

🌀 Gradient

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)
    }
    
}

💈 範例

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())

👥 相關

• can be applied on Text.

📗 參考

• Sarun ⟩

  • Gradient in SwiftUI

  • How to render text with a color gradient in SwiftUI

📘 手冊

• SwiftUI ⟩ Drawing and Animation ⟩ Gradient LinearGradient