第 60 章
使用 TextRenderer 創造視覺化文字效果

Apple 在 iOS 18 中推出的 TextRenderer API，為 SwiftUI 開發者在文字處理能力方面帶來了一個顯著的飛躍。這個強大的新工具開啟了創建動態、視覺上引人注目的文字效果的可能性，這些效果過去難以實現。

TextRenderer 的核心在於，它為開發者提供了前所未有的控制權，能掌控 SwiftUI 中文字的渲染過程。通過允許在字元、單詞或行的層面進行自定義，TextRenderer 使開發者能夠創建流暢的動畫和獨特的視覺風格，讓應用程式的文字真正「活」起來。

在本章中，我們將探索該 API 如何幫助開發者創造令人印象深刻的文字效果。

TextRenderer 的基礎概念

TextRenderer 是一個協定，你可以實作它來修改 SwiftUI 中 Text 視圖的繪製方式。它讓你可以控制渲染過程，從而對文字應用自定義效果、動畫等。

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

struct SimpleTextRenderer: TextRenderer {

    func draw(layout: Text.Layout, in context: inout GraphicsContext) {

        for (index, line) in layout.enumerated() {
            context.opacity = (index % 2 == 0) ? 0.4 : 1.0
            context.translateBy(x: 0, y: index % 2 == 0 ? -15 : 15)

            context.draw(line)
        }
    }
}

我們的目標是建立一個自定義的文字渲染器，交替改變文字行的透明度和垂直位置。奇數行的透明度將比偶數行低，此外，行的位置將根據其在文字中的位置向上或向下移動。

為了實現這個效果，我們將創建一個struct，並遵循 SwiftUI 的 TextRenderer 協定。此協定要求實作 draw 函數，這個函數包含我們自定義的文字渲染邏輯。

draw 函數是我們自定義文字渲染的地方。它通過 layout 參數提供對文字佈局資訊的訪問，並通過 context 參數提供繪圖上下文。

我們的實作會遍歷每一行文字。我們使用 index 來追蹤行號，並使用 line 變數來保存當前行的內容。偶數行將設置為 40% 的透明度並向上移動 15 點，而奇數行將保持完全不透明並向下移動 15 點。最後，使用 context.draw(line) 以計算出的透明度和位置繪製每一行。

為了使用 SimpleTextRenderer，你可以這樣更新 ContentView：

struct ContentView: View {
    var body: some View {
        Text("This guide aims to explore every new feature and improvement in iOS 26, offering a comprehensive overview of the changes.")
            .font(.largeTitle.bold())
            .textRenderer(SimpleTextRenderer())
            .padding()
    }
}

你可以將 textRenderer 修飾器附加到 Text 視圖，並傳入一個 SimpleTextRenderer 實例。在預覽中，文字應該顯示如下圖所示的效果。

要為文字的第一行添加下劃線，我們可以增強 SimpleTextRenderer 中的 draw 函數。以下是我們可以修改的方式：

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