一、SwiftUI通用组件封装的核心痛点
在日常iOS开发中，很多开发者都会遇到这样的问题：同一个样式的按钮、卡片或者输入框，需要在十几个页面里反复写相同的代码。比如登录页的登录按钮、设置页的保存按钮、个人中心的提交按钮，虽然文字和颜色不同，但内边距、圆角、点击后禁用的样式都几乎一样。如果某天产品突然要求把所有按钮的圆角从10改成12，那就要找到所有页面里的按钮，一个个修改cornerRadius，不仅耗时，还容易漏改某个地方，导致样式混乱。这就是通用组件没有封装带来的直接痛点——代码重复、维护成本高、样式不统一。
1.1 重复代码的实际例子
举个简单的例子，假设我们在两个不同的页面写按钮，不用封装的话，代码会重复到让人头疼：
// 登录页的按钮代码
Button(action: {
print("登录操作")
}) {
Text("登录")
.foregroundColor(.white)
.padding(.vertical, 14)
.padding(.horizontal, 20)
.frame(maxWidth: .infinity)
.background(Color.blue)
.cornerRadius(10)
.opacity(1) // 正常状态不透明
}
// 设置页的保存按钮代码
Button(action: {
print("保存设置")
}) {
Text("保存设置")
.foregroundColor(.white)
.padding(.vertical, 14)
.padding(.horizontal, 20)
.frame(maxWidth: .infinity)
.background(Color.green)
.cornerRadius(10)
.opacity(1)
}
你看，两个按钮的代码里，除了文字、背景色和点击事件，其余的内边距、圆角、frame设置都是一模一样的。如果项目里有10个这样的按钮，每次改样式都要重复操作，太浪费时间了。
二、通用组件封装的接口设计原则
封装组件的时候，最关键的是设计好对外的“接口”——也就是别人用这个组件的时候，需要给它提供什么参数，能自定义什么内容，而组件内部的逻辑和样式要固定，不要让别人随便动内部的东西。这样既保证了复用性，又不会因为别人改了内部样式导致项目混乱。
2.1 最小必要暴露原则
这个原则就是说，组件对外只暴露别人必须要改的参数，内部的常用样式固定死。比如刚才的按钮，别人只需要改文字、背景色、点击事件，其余的内边距、圆角都用默认值，不用让别人再传一遍。这样用组件的时候才会简单，不用写很多冗余的参数。比如别人用按钮，只需要CommonRoundedButton(title: "登录", bgColor: .blue, action: {})，不用再写一大串样式代码。
2.2 预留扩展空间
有时候，组件需要支持一些灵活的场景，比如按钮里要加图标，或者要加自定义的间隔，这时候就需要给组件留个“口子”，让别人可以往里面塞自己的内容。在SwiftUI里，用@ViewBuilder就能很方便地实现这个，允许外部传入自定义的View内容，不用固定只能放文字。
三、实际封装示例：通用圆角按钮组件
接下来我们用SwiftUI封装一个通用的圆角按钮，这个组件符合上面的原则，既能复用，又支持自定义内容。 首先明确技术栈：SwiftUI (iOS 15+)，这个版本的ViewBuilder已经很成熟，足够用了。
import SwiftUI
// 通用圆角按钮组件
// 技术栈：SwiftUI (iOS 15+)
struct CommonRoundedButton<Content: View>: View {
// 对外暴露的参数：背景颜色，默认用系统的主色调，别人可以改
let backgroundColor: Color
// 对外暴露的参数：点击事件，必须要传，不然按钮没有用
let action: () -> Void
// 预留的自定义内容空间：用ViewBuilder，别人可以塞文字、图标等
let content: () -> Content
// 初始化方法：给默认的背景颜色，让外部只需要传必要的参数
init(backgroundColor: Color = .accentColor,
action: @escaping () -> Void,
@ViewBuilder content: @escaping () -> Content) {
self.backgroundColor = backgroundColor
self.action = action
self.content = content
}
// 组件的UI构建：固定内部样式，保证所有按钮一致
var body: some View {
Button(action: action) {
content() // 外部传入的自定义内容，比如文字+图标
.foregroundColor(.white) // 文字颜色固定为白色，统一风格
.padding(.vertical, 14) // 垂直内边距固定，常用的大小，不用改
.frame(maxWidth: .infinity) // 宽度撑满父视图，适配不同屏幕
.background(backgroundColor) // 外部传的背景色
.cornerRadius(12) // 圆角固定为12，内部样式统一
}
}
}
// 组件的预览，方便开发时调试
struct CommonRoundedButton_Previews: PreviewProvider {
static var previews: some View {
VStack(spacing: 20) {
// 用默认背景的按钮，只需要传标题和点击事件
CommonRoundedButton(action: {
print("登录按钮点击了")
}) {
Text("登录")
}
// 自定义背景色，还嵌入了图标的按钮，用预留的内容空间
CommonRoundedButton(backgroundColor: .orange,
action: {
print("收藏按钮点击了")
}) {
HStack(spacing: 8) { // 图标和文字的间距，这里自定义
Image(systemName: "star.fill")
Text("收藏")
}
}
}
.padding() // 整个预览的内边距
}
}
这个组件封装好之后，用的时候就非常简单了，不管是登录页还是设置页，直接调用就行： 比如登录页的按钮： CommonRoundedButton(action: { /* 登录逻辑 / }) { Text("登录") } 设置页的按钮： CommonRoundedButton(backgroundColor: .green, action: { / 保存逻辑 */ }) { Text("保存设置") } 这样就把之前重复的代码都删掉了，只需要一行，非常简洁。
四、封装后的优势与应用场景
封装好通用组件后，带来的好处是多方面的，同时也有明确的适用场景，还有需要注意的地方。
4.1 核心优势
第一个优势就是减少重复代码，之前要写十几行的按钮代码，现在只需要一行，项目的代码量会少很多，看着更清爽。第二个优势是样式统一，所有按钮的圆角、内边距都一样，不会出现有的按钮大、有的小，样式很规整。第三个优势是维护方便，后期如果要改所有按钮的圆角，只要改组件里的cornerRadius(12)这一个地方，所有用到这个组件的按钮都会自动更新，不用一个个找，节省很多时间。
4.2 典型应用场景
这种通用按钮组件的适用场景非常多，比如表单的提交按钮，多个页面的操作按钮，弹窗里的确认和取消按钮，还有列表项的跳转按钮等。只要是用到圆角按钮的地方，都可以用这个组件。除了按钮，卡片组件、输入框组件、标签组件都可以用同样的思路封装，提高整个项目的复用性。
4.3 注意事项
封装组件的时候有几个要注意的点，首先是不要把不必要的参数暴露给外部，比如刚才的按钮，如果把cornerRadius暴露给外部，虽然灵活性高了，但会导致有的按钮圆角10，有的12，样式混乱，所以不要暴露多余的参数。然后是组件的初始化方法要尽量简洁，不要让别人传太多参数，不然别人用的时候会很麻烦，比如初始化方法里尽量给参数设默认值，只有必要的参数（比如点击事件）需要外部传。还有就是预留扩展空间的时候不要太复杂，不然组件会变得很重，难以维护，比如按钮里只要支持ViewBuilder就够了，不用再加很多自定义的样式选项，不然组件会很难理解。
五、总结
SwiftUI通用组件封装的核心，就是在“复用”和“灵活”之间找平衡——既要把通用的样式和逻辑固定在组件内部，保证复用性和维护性，又要给外部留足够的扩展空间，适配不同的场景。通过刚才的圆角按钮示例，我们可以看到，封装组件并不复杂，只要遵循最小必要暴露和预留扩展的原则，就能写出好用的通用组件，让项目的代码更简洁，维护起来更轻松。对于不同基础的开发者来说，学会封装通用组件，是提升开发效率的一个重要技巧，能帮你少走很多重复的弯路。
评论
围绕“SwiftUI自定义视图封装：通用组件封装时的接口设计与复用性优化方案”参与讨论