ViewModifier

This article is extracted from the chat log with AI. Please identify it with caution.

ViewModifier 是 SwiftUI 提供的一个协议，允许你创建可复用的视图修改器（Modifiers），以便在多个地方应用相同的视图调整或效果。它的主要作用是对 View 进行封装，以便代码更加模块化、可读性更高。

基本结构#

要使用 ViewModifier，你需要创建一个符合 ViewModifier 协议的自定义结构，并实现 body(content:) 方法。这个方法会接收 content（即被修饰的视图）并返回一个新的视图。

import SwiftUI

struct CustomModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.title)
            .padding()
            .background(Color.blue)
            .cornerRadius(10)
            .foregroundColor(.white)
    }
}

如何使用 ViewModifier#

有两种方式应用 ViewModifier：

方法 1：直接使用 `.modifier()`#

你可以在 View 上调用 .modifier()，传入自定义的 ViewModifier。

Text("Hello, SwiftUI!")
    .modifier(CustomModifier())

方法 2：扩展 View#

为了简化 .modifier(CustomModifier()) 的写法，可以使用 View 扩展提供一个便捷方法：

extension View {
    func customStyle() -> some View {
        self.modifier(CustomModifier())
    }
}

然后可以这样使用：

Text("Hello, SwiftUI!")
    .customStyle()

传递参数#

ViewModifier 还可以接受参数，以便在不同情况下使用不同的值。例如：

struct BorderModifier: ViewModifier {
    var color: Color
    var width: CGFloat

    func body(content: Content) -> some View {
        content
            .overlay(
                RoundedRectangle(cornerRadius: 10)
                    .stroke(color, lineWidth: width)
            )
    }
}

使用方式：

Text("Custom Border")
    .modifier(BorderModifier(color: .red, width: 2))

或者通过扩展简化：

extension View {
    func customBorder(color: Color, width: CGFloat) -> some View {
        self.modifier(BorderModifier(color: color, width: width))
    }
}

Text("Custom Border")
    .customBorder(color: .red, width: 2)

组合多个 Modifier#

如果需要在 ViewModifier 内部应用多个样式，可以链式调用它们：

struct CombinedModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.headline)
            .padding()
            .background(Color.yellow)
            .clipShape(Capsule())
            .shadow(radius: 5)
    }
}

使用时：

Text("Styled Text")
    .modifier(CombinedModifier())

适用场景#

复用 UI 逻辑：当你在多个地方使用相同的样式时，ViewModifier 可以避免重复代码。
参数化 UI 组件：通过传入参数，你可以动态调整样式。
清晰的代码结构：让 View 代码更清晰，而不是堆叠大量 .padding() .background() .cornerRadius() 等修饰符。

如果你的修改逻辑较简单，可能直接使用 View 的扩展函数会更简洁。但如果涉及复杂的 UI 逻辑，ViewModifier 会是一个更好的选择。