使用 ViewModifier 封装重复的UI配置

你是否发现自己在 SwiftUI 项目中一遍又一遍地编写相同的 UI 代码？🤔 别担心，ViewModifier 可以帮助你！它可以将重复的 UI 配置封装起来，让你的代码更简洁、更易于维护。

ViewModifier 就像一个 UI 样式的“配方”，你可以将它应用到任何视图上。这不仅减少了代码量，还确保了 UI 的一致性。想象一下，你有一个按钮样式，需要在多个地方使用。使用 ViewModifier，你只需定义一次，然后在需要的地方应用即可。

创建你的第一个 ViewModifier

让我们创建一个简单的 ViewModifier，给视图添加一个圆角和阴影。

struct ShadowModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .cornerRadius(10)
            .shadow(radius: 5)
    }
}

现在，你可以使用 .modifier() 方法将这个 ViewModifier 应用到任何视图上。

Text("Hello, World!")
    .modifier(ShadowModifier())

是不是很简单？🎉 你还可以通过创建 extension 来简化使用方式。

extension View {
    func shadowStyle() -> some View {
        self.modifier(ShadowModifier())
    }
}

现在，你可以这样使用：

Text("Hello, World!")
    .shadowStyle()

更多 ViewModifier 的应用场景

ViewModifier 的用途远不止于此。你可以用它来：

• 统一字体样式：确保所有标题使用相同的字体、大小和颜色。
• 设置间距：统一视图之间的间距，保持布局的一致性。
• 添加背景：为特定类型的视图添加统一的背景颜色或图片。

例如，创建一个 ViewModifier 来设置统一的按钮样式：

struct ButtonStyleModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding()
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(8)
    }
}

然后，你可以像这样使用它：

Button("Click Me!") {
    // Action
}
.modifier(ButtonStyleModifier())

优势与总结

使用 ViewModifier 的优势显而易见：

1. 代码重用: 避免重复编写相同的 UI 代码。
2. 易于维护: 修改 ViewModifier，所有应用该样式的视图都会自动更新。
3. 提高一致性: 确保 UI 风格在整个应用中保持一致。

通过 ViewModifier，你可以构建更清晰、更易于维护的 SwiftUI 代码。🚀 尝试在你的项目中应用 ViewModifier，你会发现它能大大提高你的开发效率！