昨天我們一起研究了 SwiftUI 中一些常見的 View Modifiers，像是 padding() 和 background() 等等。今天，我們要來更進一步，看看進階的 View Modifiers，甚至自己動手試試看客製化 Modifier。

這些進階技巧看起來可能有點複雜，但我相信我們一起摸索的話，肯定能搞懂其中的奧秘。如果你是新讀者，還沒看前面的文章，可以先回顧複習一下 Day 5 文章唷！準備好一起深入挖掘了嗎？讓我們開始吧！

使用 modifier(:) 來客製化

在我們日常使用 SwiftUI 的過程中，有時候會發現一組常見的 Modifiers 總是要一起使用，並且有許多 UI 元件要使用一樣的 Modifiers ，這時候我們就可以考慮建立一個客製化的 Modifier，把這些常用的設計打包成一個。

struct TitleStyle: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.largeTitle)
            .foregroundStyle(.blue)
            .padding()
            .background(Color.gray.opacity(0.2))
            .cornerRadius(10)
    }
}

這段程式建立一個名為 TitleStyle 的自訂 Modifier，我們可以將它應用到任何文字元件上，讓文字看起來更像標題。這樣做不僅可以讓程式碼更簡潔，也可以保持設計風格的一致性。

我們來試著用這個客製化的 Modifier 吧！

Text("Welcome to SwiftUI!")
    .modifier(TitleStyle())

使用 modifier(TitleStyle()) 後，這段文字就會自動應用我們剛剛設計好的樣式，是不是方便多了？

參考資料：modifier(:) | Apple Developer Documentation

使用 Extension 讓程式碼更簡潔

雖然可以直接使用 .modifier(TitleStyle()) 來為我們的 Text 設定樣式，但這樣直接使用自訂 Modifier 的寫法不夠直覺，格式也不一致。

為了解決這個問題，我們可以利用 extension 來擴展 View，使其具備這個客製化的樣式方法。這樣不僅讓程式碼更直覺，還能與 SwiftUI 內建的 Modifiers 格式保持一致，看起來較統一。

extension View {
    func titleStyle() -> some View {
        self.modifier(TitleStyle())
    }
}

現在，我們可以這樣使用：

Text("Welcome to SwiftUI!")
    .titleStyle()
    .padding()

這樣的寫法讓程式碼看起來更加簡潔，並且更符合 SwiftUI 的風格。

增加客製化 Modifier 的參數

有時候，我們希望客製化的 Modifier 能夠接受不同的參數，這樣就可以根據不同的需求來應用不同的樣式。讓我們來看一下如何為客製化的 Modifier 增加參數。

struct HighlightedText: ViewModifier {
    var color: Color

    func body(content: Content) -> some View {
        content
            .padding()
            .background(color)
            .cornerRadius(8)
            .shadow(radius: 5)
    }
}

這段程式碼建立一個名為 HighlightedText 的自訂 Modifier，並且接受一個 color 參數，這樣我們就可以根據需要設置不同的背景顏色。

接著，我們可以通過 extension 來讓這個參數的使用變得更直覺：

extension View {
    func highlightedText(with color: Color) -> some View {
        self.modifier(HighlightedText(color: color))
    }
}

現在，我們可以這樣使用：

Text("Custom Highlight!")
    .highlightedText(with: .yellow)
    .padding()

很方便吧！這樣的寫法可以將 App 內的常用格式建立成客製化的 Modifier，使得程式碼更具一致性和可讀性。

總結

今天我們一起挖掘了進階的 View Modifiers，還試著建立自己的客製化 Modifier。經過今天的練習，真的是深深感覺到 SwiftUI 這種宣告式的語法真的很方便啊！今天就先到這邊，明天我們再接再厲，大家明天見囉～