在 iOS 开发的浩瀚星河里SwiftUI 像一把点燃创意的火把。它让我们Ke以用声明式语法快速搭建界面却也对「可复用」提出了geng高的期待。本文将从零开始拆解自定义视图的方方面面——从命名、参数设计到性Neng调优，再配上完整可运行的示例代码，帮助你在项目中快速落地。

系统提供的控件固然强大，但在真实产品里总会出现「独一无二」的需求：

品牌配色需要精准匹配；

交互细节只Neng自己雕琢；

同一套 UI 在多个页面反复出现，若不抽离成组件会导致代码冗余。

把这些需求封装成「自定义视图」后你会发现：

界面保持统一，改动一次全局生效；

业务逻辑与 UI 表现分离，团队协作geng顺畅；

编译期检查geng严格，运行时错误大幅降低。

名字是入口。CustomButtonUserBadgeViewStatusProgressBar 等，dou应该让阅读者“一眼就Neng猜到”它的职责。

Ru果一个属性在大多数场景下dou有统一取值，就给它设一个默认值，这样调用方只需关心关键配置，代码才会geng简洁。

Avoid nesting too many containers – a simple VStack/HStack/ZStack combo usually suffices. 把间距和对齐方式写进组件内部，让外部使用者免去繁琐调参。

.accessibilityLabel/.accessibilityHint Neng让盲人用户也感受到你的用心。

#if DEBUG 环境下打开打印，其余时候关闭，以免影响 Release 包体积；

@StateObject / @ObservedObject 的使用要分清所有权，避免不必要的 view 重绘；

.drawingGroup/.compositingGroup Neng在复杂层级里提升渲染效率。

目标：

- 支持主/次两种风格；

- 点击回调通过闭包注入；

- 自动适配暗黑模式。

import SwiftUI
struct FancyButton: View {
    let title: String
    let style: ButtonStyle
    let action: ->Void
    enum ButtonStyle {
        case primary   // 蓝底白字
        case secondary // 灰底黑字
    }
    var backgroundColor: Color {
        switch style {
        case .primary   : return Color.accentColor
        case .secondary : return Color.gray.opacity
        }
    }
    var foregroundColor: Color {
        style == .primary ? .white : .primary
    }
    var body: some View {
        Button {
            Text
                .font)
                .padding
                .padding
                .background
                .foregroundColor
                .cornerRadius
                .shadow, radius:4,x:0,y:2)
        }
        .accessibilityLabel
        .accessibilityHint
    }
}

使用示例：

FancyButton{
     print
}
FancyButton{
     print
}

A card that can host an icon plus two lines of text.

struct InfoCard: View {
    let title:String
    let subtitle:String
    let systemIcon:String   // 使用 SF Symbols
    var body: some View {
        VStack{
            HStack{
                Image
                    .font)
                    .foregroundColor
                Spacer
            }
            Text
                .font.bold
            Text
                .font.foregroundColor
        }
        .padding
        .background)
        .cornerRadius
        .shadow)
       // 无障碍标签
       .accessibilityElement
       .accessibilityLabel，\")
   }
}

Demos：

InfoCard(title:"欢迎使用 SwiftUI",
         subtitle:"轻松创建现代 UI",
         systemIcon:"star.fill")
InfoCard(title:"学习路线",
         subtitle:"从入门到高级进阶",
         systemIcon:"book.closed") 

struct StatusProgressBar: View {
    var progress:Double          // 范围 0~1
    var tintColor = Color.red
     init{
         self.progress = min,1)   // 防止越界
         self.tintColor = c
     }
     var body: some View{
         GeometryReader { geo in
             ZStack{
                 RoundedRectangle
                     .fill)
                 RoundedRectangle
                     .fill
                     .frame(width:
                         geo.size.width * CGFloat)
             }
             .frame
         }
         .frame   // 固定高度防止父容器压缩
         .animation,value:
                    progress )
     }
}

E.g.

StatusProgressBar               // 红色默认色
StatusProgressBar   // 绿意盎然
StatusProgressBar 

struct TagBadge : View{
   let text:String
   let bgColor : Color
   init{
      self.text = txt; self.bgColor=c
   }
   var body : some View{
      Text
          .font.bold
          .padding.padding
          .background)
          .foregroundColor
          .accessibilityLabel
   }
}

Demos：

TagBadge    
TagBadge     
TagBadge   
TagBadge               // 默认蓝色 

struct SpringToggle : View{
   @Binding var isOn : Bool
   var body : some View{
       Button{
           withAnimation){
               isOn.toggle
           }
       } label:{
           HStack{
               Text
                   .fontWeight
               Spacer
               RoundedRectangle(cornerRadius:
                                 16).fill(isOn ?
                                          Color.green :
                                          Color.gray.opacity)
                   .frame
               Circle
                  .fill(Color.white.shadow(radius:
                                           1))
                  .frame
                  //.offset 根据状态左右移动 
                  //.animation 在 iOS15+ 可直接绑定 state 
                  //.offset
           }
           .padding.background(
              RoundedRectangle(cornerRadius:
                               20).fill)
           }.accessibilityLabel
   }
}

Demos：

@State private var soundEnabled = true
SpringToggle
@State private var darkMode = false
SpringToggle

struct RowItem : View{
   let title:String; let subtitle:String; let iconName:String
   var body : some View{
      HStack{
          Image(systemName:
                iconName).foregroundColor.font(
                    Font.system(size:
                              22))
          VStack(alignment:.leading,
                 spacing :4){
              Text.font
              Text.font.
                     foregroundColor
          }
          Spacer
          Image.
               foregroundColor
      }.padding
       //.background)
       //.cornerRadius.shadow(radius:
       //                 1,color:
       //                 Color.black.opacity(
       //                    0.05),x:-1,y:-1)
      // 完整无障碍描述：
      //.accessibilityElement(children:
      //                       )
      //.accessibilityLabel，\")
   }
}

RowItem(title:"设置",
         subtitle:"系统偏好管理",
         iconName:"gearshape")
RowItem(title:"个人资料",
         subtitle:"编辑你的信息",
         iconName:"person.crop.circle") 
全局演示页面 —— 一站式预览所有组件 


swift
import SwiftUI
struct ComponentShowcase : View{
 @State private var toggleFlag = false
 var body : some View{
 ScrollView{
 VStack{
     /*----- 标题 -----*/
     Text
         .font.bold
         .foregroundColor
     /*----- 按钮 -----*/
     VStack{
         FancyButton{print}
         FancyButton{print}
     }.padding.background(
        Color.gray.opacity).cornerRadius
     /*----- 卡片 -----*/
     VStack{
         InfoCard(title:"SwiftUI 入门",
                  subtitle:"一步步掌握声明式 UI",
                  systemIcon:"sparkles")
         InfoCard(title:"高级特性",
                  subtitle:"深度玩转动画与手势",
                  systemIcon:"bolt.fill")
     }.padding.background(
        Color.gray.opacity).cornerRadius
     /*----- 进度条 -----*/
     VStack{
         StatusProgressBar
         StatusProgressBar
         StatusProgressBar
     }.padding.background(
        Color.gray.opacity).cornerRadius
     /*----- 徽章 -----*/
     HStack{
          TagBadge
          TagBadge
          TagBadge
          TagBadge       
      }.padding.background(
        Color.gray.opacity).cornerRadius
      /*----- 开关 -----*/
      SpringToggle
      /*----- 列表项 -----*/
      VStack{
           RowItem(title :"通知中心",
                   subtitle :"管理推送设置",
                   iconName :"bell.fill")
           RowItem(title :"账户安全",
                   subtitle :"修改密码或绑定邮箱",
                   iconName :"lock.shield")
      }.padding.background(
        Color.gray.opacity).cornerRadius
 }///VStack end 
 }.padding

}///ScrollView end 
}///Body end 
ComponentShowcase
}


收官小结：把“定制”变成“习惯” 
从按钮、卡片到进度条、徽章，再到带弹性的开关和结构化列表项，我们Yi经把一套完整的 UI 基础设施搭建完毕。下面再把关键点浓缩为几句箴言，方便你在项目里随手翻阅：

命名即文档：Simplify → SimpleButton / PrimaryCard 等，一眼Nengkan出用途。
Pare down 参数：If a property rarely changes – give it a default value.
No magic numbers：Avoid hard‑coded spacing; expose常量或使用系统标准。 
A11y first：Add .accessibilityLabel and .hint even for decorative components.

Tune performance:Leverage  when compositing many layers.
Document every component:Use MARK and doc comments so teammates know “how to use”. 
 

S​w​i​f​t​U​I 的魅力就在于，你Ke以把每个细碎需求包装成独立模块，然后像拼乐高一样自由拼接。只要坚持以上原则，你写出的自定义视图不仅外观出众，gengNeng在团队协作中保持长久活力。


© 2026 TechWrite Studio | 本文基于原创内容撰写，仅用于学习交流，如需转载请注明出处。