第 59 章
利用 Mesh Gradients 建立獨特的漸層效果

iOS 18 引入了 Color Mesh Gradients，這是一個強大的新工具，可以在你的 SwiftUI 應用程式中創建令人驚艷且獨特的漸層效果。與傳統的線性或徑向漸層不同，Mesh 漸層提供了對顏色過渡的更多控制，能夠創造出獨特、流暢的效果。

MeshGradient 是 SwiftUI 中一個強大的工具，用於創建複雜的顏色過渡。它使用控制點網格來定義漸層的外觀，允許更自然和平滑的顏色混合。

本章將向你介紹如何在 SwiftUI 中使用 MeshGradient 的基本概念，並提供易於理解的範例。我們一起深入了解吧！

構建基礎：點和顏色

MeshGradient 的運作方式類似於一個顏色網格。這個網格中的每個點稱為頂點（vertex）。每個頂點有以下屬性：

1. 位置（該點所在的地方）
2. 顏色
3. 四條彎曲的線（稱為貝塞爾曲線），它們將該點與附近的點連接

這些彎曲的線有助於在點與點之間平滑地混合顏色。如果某個點位於網格的邊緣或角落，它可能會有較少的連接。

你可以自行設置這些彎曲的線，或者讓系統自動處理。這種靈活性允許你根據設計需求創建簡單或複雜的顏色混合效果。

讓我們從一個簡單的範例開始：

import SwiftUI

struct ContentView: View {
    var body: some View {
        MeshGradient(width: 2, height: 2, points: [
            .init(x: 0, y: 0),
            .init(x: 0, y: 1),
            .init(x: 1, y: 0),
            .init(x: 1, y: 1)
        ], colors: [
            .red,
            .green,
            .yellow,
            .purple
        ])
        .ignoresSafeArea()

    }
}

這段程式碼生成了一個使用四種顏色的簡單 Mesh 漸層。這些顏色從 2x2 網格的角落開始，並平滑地向中心融合，創造出一個平衡且對稱的效果。

你可以調整程式碼來創建一個 3x3 網格，像這樣：

想更深入學習SwiftUI和下載完整程式碼？你可以從 AppCoda網站購買《精通 SwiftUI》完整電子版。