统一表单行的样式

在构建用户界面时，一致性至关重要！🎨 统一的样式不仅提升了应用的美观度，还能改善用户体验。让我们一起看看如何为表单行组件打造统一的样式吧！

样式基础

首先，你需要定义一套基础样式规则。这包括：

• 字体：选择一种清晰易读的字体，例如苹方 (PingFang)。
• 颜色：确定主色调、辅助色和强调色。
• 间距：设置统一的内边距和外边距，保持元素之间的平衡。
• 圆角：为组件添加适度的圆角，使其看起来更柔和。

这些基础样式将贯穿所有表单行组件，确保视觉上的一致性。

使用ViewModifier

ViewModifier 是一个强大的工具，可以让你轻松地将样式应用到多个视图。你可以创建一个自定义的 FormRowStyle 结构体，并实现 ViewModifier 协议。

struct FormRowStyle: ViewModifier {
    func body(content: Content) -> some View {
        content
            .padding()
            .background(Color.white)
            .cornerRadius(8)
            .shadow(radius: 2)
    }
}

然后，你可以通过 modifier() 方法将这个样式应用到你的表单行组件上。

FormRow(label: "姓名", content: TextField("请输入姓名", text: $name))
    .modifier(FormRowStyle())

样式配置

为了更灵活地控制样式，你可以将一些样式属性作为参数传递给 FormRowStyle。例如，你可以添加一个 backgroundColor 参数，允许开发者自定义表单行的背景颜色。

struct FormRowStyle: ViewModifier {
    let backgroundColor: Color

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

现在，你可以这样使用：

FormRow(label: "姓名", content: TextField("请输入姓名", text: $name))
    .modifier(FormRowStyle(backgroundColor: .gray.opacity(0.1)))

样式复用

为了进一步简化代码，你可以创建一个 View 扩展，将 modifier() 方法封装起来。

extension View {
    func formRowStyle(backgroundColor: Color = .white) -> some View {
        self.modifier(FormRowStyle(backgroundColor: backgroundColor))
    }
}

现在，你可以更简洁地应用样式：

FormRow(label: "姓名", content: TextField("请输入姓名", text: $name))
    .formRowStyle(backgroundColor: .gray.opacity(0.1))

通过这些方法，你可以轻松地为你的表单行组件创建和应用统一的样式，提升应用的用户体验！🚀