3.3 常用组件

本篇目标

掌握 SwiftUI 常用组件 Text、Image、Button 的用法，理解字体、颜色、图标系统，能组合组件构建常见界面元素。

一、Text

Text 用于显示文字，是 SwiftUI 最基础的组件。

基础用法：

Text("Hello, SwiftUI!")

字体：

Text("标题").font(.title)
Text("大标题").font(.largeTitle)
Text("正文").font(.body)
Text("小字").font(.caption)
Text("自定义").font(.system(size: 24, weight: .bold, design: .rounded))

常用系统字体：

字重：

Text("粗体").fontWeight(.bold)
Text("半粗").fontWeight(.semibold)
Text("常规").fontWeight(.regular)
Text("细体").fontWeight(.light)

颜色：

Text("蓝色").foregroundColor(.blue)
Text("自定义").foregroundColor(Color(red: 0.2, green: 0.5, blue: 0.9))
Text("十六进制").foregroundColor(Color(hex: "#3B82F6"))

对齐与行距：

Text("多行文字\n第二行")
    .multilineTextAlignment(.center)
    .lineSpacing(6)

行数限制：

Text("这是一段很长的文字...")
    .lineLimit(2)

截断方式：

Text("这是一段很长的文字...")
    .lineLimit(1)
    .truncationMode(.tail)   // 尾部截断

文字样式组合：

Text("重要提示")
    .font(.headline)
    .foregroundColor(.white)
    .padding(.horizontal, 12)
    .padding(.vertical, 6)
    .background(Color.blue)
    .cornerRadius(8)

二、Image

Image 用于显示图片，支持系统图标（SF Symbols）和资源图片。

系统图标：

Image(systemName: "star.fill")
Image(systemName: "heart")
Image(systemName: "person.circle")

资源图片：

Image("logo")

调整尺寸：

Image(systemName: "star.fill")
    .font(.largeTitle)

Image("logo")
    .resizable()
    .frame(width: 100, height: 100)

保持比例：

Image("photo")
    .resizable()
    .aspectRatio(contentMode: .fit)
    .frame(width: 200, height: 200)

填充模式：

裁剪圆角：

Image("photo")
    .resizable()
    .frame(width: 100, height: 100)
    .clipShape(Circle())

图标颜色：

Image(systemName: "heart.fill")
    .foregroundColor(.red)

SF Symbols 常用图标：

三、Button

Button 是可点击的交互组件。

基础用法：

Button("点击我") {
    print("按钮被点击")
}

带样式：

Button("确认") {
    // 操作
}
.buttonStyle(.borderedProminent)

常用按钮样式：

自定义按钮：

Button {
    print("点击")
} label: {
    HStack {
        Image(systemName: "plus")
        Text("添加")
    }
    .padding()
    .background(Color.blue)
    .foregroundColor(.white)
    .cornerRadius(10)
}

按钮颜色：

Button("删除") {
    // 操作
}
.tint(.red)

禁用按钮：

Button("提交") {
    // 操作
}
.disabled(true)

图标按钮：

Button {
    // 操作
} label: {
    Image(systemName: "heart.fill")
        .font(.title)
        .foregroundColor(.red)
}

四、颜色系统

系统颜色：

Color.blue
Color.red
Color.green
Color.orange
Color.purple
Color.gray

语义颜色（自动适配深色模式）：

Color.primary       // 主文字色
Color.secondary     // 次级文字色
Color.accentColor   // 强调色

系统背景色：

Color(.systemBackground)
Color(.secondarySystemBackground)
Color(.systemGray6)

自定义颜色：

Color(red: 0.2, green: 0.5, blue: 0.9)
Color(hue: 0.6, saturation: 0.8, brightness: 0.9)

Assets 颜色：

Color("BrandBlue")

渐变：

LinearGradient(
    colors: [.blue, .purple],
    startPoint: .topLeading,
    endPoint: .bottomTrailing
)

常用渐变：

// 线性渐变
LinearGradient(colors: [.blue, .green], startPoint: .leading, endPoint: .trailing)

// 径向渐变
RadialGradient(colors: [.white, .blue], center: .center, startRadius: 0, endRadius: 100)

// 角度渐变
AngularGradient(colors: [.red, .yellow, .green, .blue, .purple, .red], center: .center)

五、字体与排版

动态字体：

Text("支持动态字体")
    .font(.body)

系统会自动根据用户设置调整字号。

自定义字体：

Text("自定义字体")
    .font(.custom("PingFangSC-Regular", size: 18))

字体设计：

Text("圆体").font(.system(.body, design: .rounded))
Text("等宽").font(.system(.body, design: .monospaced))
Text("衬线").font(.system(.body, design: .serif))

文字组合：

Text("Hello ")
    .font(.title)
    .fontWeight(.bold)
+ Text("SwiftUI")
    .font(.title)
    .foregroundColor(.blue)

六、常见组件组合

标签

Text("新功能")
    .font(.caption)
    .fontWeight(.semibold)
    .foregroundColor(.white)
    .padding(.horizontal, 8)
    .padding(.vertical, 4)
    .background(Color.green)
    .cornerRadius(6)

图标 + 文字

HStack(spacing: 6) {
    Image(systemName: "star.fill")
        .foregroundColor(.yellow)
    Text("4.9")
        .font(.subheadline)
}

带头像的信息行

HStack {
    Image(systemName: "person.circle.fill")
        .font(.largeTitle)
        .foregroundColor(.blue)
    VStack(alignment: .leading) {
        Text("用户名")
            .font(.headline)
        Text("简介信息")
            .font(.caption)
            .foregroundColor(.gray)
    }
    Spacer()
}
.padding()

主按钮与次按钮

VStack(spacing: 12) {
    Button("主要操作") {
        // 操作
    }
    .buttonStyle(.borderedProminent)
    .frame(maxWidth: .infinity)

    Button("次要操作") {
        // 操作
    }
    .buttonStyle(.bordered)
    .frame(maxWidth: .infinity)
}
.padding()

七、避坑指南

• Image 默认不缩放：需要 .resizable() 才能调整尺寸。

• 系统图标名写错会空白：使用 SF Symbols 应用查找准确名称。

• 颜色不要写死：优先用语义颜色，适配深色模式。

• 按钮点击区域：自定义按钮要保证足够的点击区域。

• 文字过长：加 .lineLimit() 防止布局溢出。

• 渐变性能：大量渐变可能影响滚动性能。

八、检查清单

• [ ] 掌握 Text 的字体、颜色、对齐

• [ ] 会使用 Image 显示图标和图片

• [ ] 掌握 Button 的多种写法

• [ ] 理解系统颜色与语义颜色

• [ ] 会使用渐变

• [ ] 能组合常见组件（标签、图标文字、按钮组）

• [ ] 能处理深色模式适配