在 SwiftUI 中，ViewModifier 是一個強大的工具，用來自定義和重用視圖樣式。通過自定義 ViewModifier，你可以將視圖的外觀和行為邏輯封裝到單一模塊中，並且可以在多個視圖中應用相同的樣式。

定義自定義 ViewModifier

要自定義一個 ViewModifier，你需要創建一個結構體，遵循 ViewModifier 協議，並實現 body(content:) 函數。這個函數定義了修改後的視圖樣式。

例如，下面是一個自定義的 ViewModifier，用來給視圖添加圓角、陰影和填充顏色：

struct CustomButtonModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding()
            .background(Color.blue)
            .cornerRadius(10)
            .shadow(color: .gray, radius: 5, x: 0, y: 5)
            .foregroundColor(.white)
            .font(.headline)
    }
}

這個 CustomButtonModifier 將視圖進行了一系列樣式處理，包括填充、圓角、陰影和文字顏色。

使用自定義的 ViewModifier

你可以使用 .modifier() 函數來應用這個自定義的樣式。如下所示：

struct ContentView: View {
    var body: some View {
        VStack {
            Button("Custom Button") {}
                .modifier(CustomButtonModifier())

            Text("Another Custom View")
                .modifier(CustomButtonModifier())
        }
    }
}

這裡，Button 和 Text 都應用了相同的 CustomButtonModifier，從而擁有相同的樣式。

使用 .modifier 簡化語法

如果你覺得每次使用 .modifier(CustomButtonModifier()) 有點繁瑣，可以將它封裝為一個自定義的 View 擴展方法，這樣更便於使用：

extension View {
    func customButtonStyle() -> some View {
        self.modifier(CustomButtonModifier())
    }
}

這樣一來，你可以直接在視圖上使用 .customButtonStyle()：

struct ContentView: View {
    var body: some View {
        VStack {
            Button("Custom Button") {}
                .customButtonStyle()

            Text("Another Custom View")
                .customButtonStyle()
        }
    }
}

帶參數的 ViewModifier

有時你可能希望 ViewModifier 能接受參數，讓其更具靈活性。比如，你可以讓圓角的半徑和背景顏色可變：

struct CustomizableModifier: ViewModifier {
    var cornerRadius: CGFloat
    var backgroundColor: Color

    func body(content: Content) -> some View {
        content
            .padding()
            .background(backgroundColor)
            .cornerRadius(cornerRadius)
            .shadow(color: .gray, radius: 5, x: 0, y: 5)
            .foregroundColor(.white)
            .font(.headline)
    }
}

使用時可以傳入不同的參數：

struct ContentView: View {
    var body: some View {
        VStack {
            Button("Button 1") {}
                .modifier(CustomizableModifier(cornerRadius: 15, backgroundColor: .blue))

            Button("Button 2") {}
                .modifier(CustomizableModifier(cornerRadius: 25, backgroundColor: .green))
        }
    }
}

這樣就可以根據具體情況動態設置樣式的參數，比如不同的按鈕使用不同的背景顏色和圓角大小。

結論

ViewModifier 提供了很好的視圖樣式重用和封裝功能，使得 SwiftUI 中的樣式設計更具可讀性和可擴展性。通過創建自定義的 ViewModifier，你可以輕鬆地控制應用中多個視圖的一致性，並且可以根據需要靈活地調整樣式參數。