SwiftUI UI设计实战教程轻松掌握现代苹果应用界面开发技巧

威震华夏关云长 · 发表于 2025-9-10 23:20:01

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

引言

SwiftUI是苹果在2019年推出的现代化UI框架，它彻底改变了iOS、macOS、watchOS和tvOS应用的开发方式。与传统的UIKit相比，SwiftUI采用了声明式编程范式，使开发者能够用更少的代码创建更美观、更响应式的用户界面。本教程将带您从零开始，逐步掌握SwiftUI的核心概念和实用技巧，帮助您轻松构建现代化的苹果应用界面。

SwiftUI的主要优势包括：

• 代码简洁：比UIKit减少约50%-70%的代码量
• 跨平台：同一套代码可运行在多个苹果平台上
• 实时预览：Xcode提供实时界面预览功能
• 声明式语法：更直观、更易理解和维护
• 自动适应：界面自动适应不同屏幕尺寸和方向

SwiftUI基础

基本语法结构

SwiftUI的基本语法结构非常简洁。一个最简单的SwiftUI视图如下所示：

import SwiftUI
struct ContentView: View {
var body: some View {
Text("Hello, SwiftUI!")
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}

复制代码

在这个例子中：

• ContentView是一个遵循View协议的结构体
• body属性返回一个描述视图内容的视图层次结构
• ContentView_Previews提供Xcode预览功能

视图修饰器

视图修饰器是SwiftUI中用于修改视图外观和行为的函数。它们可以通过链式调用来组合多个修饰效果：

Text("Hello, SwiftUI!")
.font(.title)
.fontWeight(.bold)
.foregroundColor(.blue)
.padding()
.background(Color.yellow)
.cornerRadius(10)

复制代码

这个例子中，我们应用了多个修饰器来改变文本的字体、粗细、颜色、内边距、背景和圆角。

常用UI组件

文本显示

SwiftUI中的Text视图用于显示静态或动态文本：

// 静态文本
Text("Hello, World!")
// 动态文本
let name = "John"
Text("Hello, \(name)!")
// 多行文本
Text("This is a long text that will wrap across multiple lines automatically when it reaches the edge of the screen.")
.lineLimit(nil) // 无限行数
.multilineTextAlignment(.center) // 居中对齐

复制代码

图像显示

Image视图用于显示图片：

// 显示系统图标
Image(systemName: "star.fill")
.font(.largeTitle)
.foregroundColor(.yellow)
// 显示应用中的图片
Image("myImage")
.resizable() // 使图像可调整大小
.aspectRatio(contentMode: .fit) // 保持宽高比
.frame(width: 200, height: 200) // 设置框架大小
// 从网络加载图片（需要URLImage库或AsyncImage）
AsyncImage(url: URL(string: "https://example.com/image.jpg"))
.frame(width: 200, height: 200)
.clipShape(Circle()) // 裁剪为圆形

复制代码

按钮交互

Button视图用于创建可交互的按钮：

// 基本按钮
Button(action: {
print("Button tapped!")
}) {
Text("Click Me")
.padding()
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(10)
}
// 按钮样式
Button(action: {
// 按钮动作
}) {
Label("Start", systemImage: "play.fill")
}
.buttonStyle(.borderedProminent)
.controlSize(.large)

复制代码

输入控件

SwiftUI提供了多种输入控件，如文本框、滑块、开关等：

// 文本框
@State private var username: String = ""
TextField("Enter your name", text: $username)
.textFieldStyle(RoundedBorderTextFieldStyle())
.padding()
// 安全文本框（密码输入）
@State private var password: String = ""
SecureField("Enter password", text: $password)
.textFieldStyle(RoundedBorderTextFieldStyle())
.padding()
// 滑块
@State private var sliderValue: Double = 0.5
Slider(value: $sliderValue, in: 0...1) {
Text("Value")
}
.padding()
// 开关
@State private var isNotificationEnabled: Bool = true
Toggle(isOn: $isNotificationEnabled) {
Text("Enable Notifications")
}
.padding()
// 选择器
@State private var selectedColor = "Red"
Picker("Select a color", selection: $selectedColor) {
Text("Red").tag("Red")
Text("Green").tag("Green")
Text("Blue").tag("Blue")
}
.pickerStyle(.segmented)
.padding()

复制代码

布局系统

垂直和水平布局

SwiftUI提供了三种基本的布局容器：VStack（垂直堆栈）、HStack（水平堆栈）和ZStack（层叠堆栈）。

// 垂直布局
VStack(alignment: .leading, spacing: 20) {
Text("Title")
.font(.title)
Text("Subtitle")
.font(.subheadline)
.foregroundColor(.gray)
Text("This is the main content of the view. It can be longer and will wrap to multiple lines.")
}
.padding()
// 水平布局
HStack(spacing: 15) {
Image(systemName: "person.circle.fill")
.font(.largeTitle)
.foregroundColor(.blue)
VStack(alignment: .leading) {
Text("John Doe")
.font(.headline)
Text("Software Engineer")
.font(.subheadline)
.foregroundColor(.secondary)
}
Spacer() // 占据可用空间，将内容推到左侧
}
.padding()
// 层叠布局
ZStack {
// 背景图片
Image("background")
.resizable()
.aspectRatio(contentMode: .fill)
// 半透明遮罩
Color.black
.opacity(0.4)
// 前景内容
VStack {
Text("Welcome")
.font(.largeTitle)
.fontWeight(.bold)
.foregroundColor(.white)
Text("Please sign in to continue")
.font(.subheadline)
.foregroundColor(.white)
}
}
.frame(height: 200)

复制代码

灵活布局

SwiftUI提供了Spacer和Divider等视图来帮助创建灵活的布局：

HStack {
Text("Left")
Spacer() // 占据中间的可用空间
Text("Right")
}
.frame(height: 50)
VStack {
Text("Top")
Divider() // 水平分隔线
Text("Bottom")
}
.frame(height: 200)

复制代码

条件布局

使用if语句和Group可以根据条件显示不同的视图：

@State private var isLoggedIn = false
VStack {
if isLoggedIn {
Text("Welcome back!")
Button("Log Out") {
isLoggedIn = false
}
} else {
Text("Please log in")
Button("Log In") {
isLoggedIn = true
}
}
}
.padding()

复制代码

自定义布局容器

SwiftUI允许您创建自定义的布局容器：

struct GridStack<Content: View>: View {
let rows: Int
let columns: Int
let content: (Int, Int) -> Content
var body: some View {
VStack {
ForEach(0..<rows, id: \.self) { row in
HStack {
ForEach(0..<columns, id: \.self) { column in
content(row, column)
}
}
}
}
}
}
// 使用自定义网格布局
GridStack(rows: 3, columns: 3) { row, col in
Text("R\(row)C\(col)")
.frame(width: 50, height: 50)
.background(Color.secondary)
.cornerRadius(8)
}

复制代码

状态管理

@State属性包装器

@State用于管理视图的本地状态：

struct CounterView: View {
@State private var count = 0
var body: some View {
VStack {
Text("Count: \(count)")
.font(.title)
Button("Increment") {
count += 1
}
.padding()
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(10)
}
}
}

复制代码

@Binding属性包装器

@Binding用于创建对状态的引用，允许子视图修改父视图的状态：

struct ToggleView: View {
@Binding var isOn: Bool
var body: some View {
Button(action: {
isOn.toggle()
}) {
Text(isOn ? "On" : "Off")
.padding()
.background(isOn ? Color.green : Color.red)
.foregroundColor(.white)
.cornerRadius(10)
}
}
}
struct ParentView: View {
@State private var switchState = false
var body: some View {
VStack {
Text("Switch is \(switchState ? "On" : "Off")")
ToggleView(isOn: $switchState)
}
}
}

复制代码

@ObservedObject和@StateObject

@ObservedObject和@StateObject用于观察符合ObservableObject协议的对象：

class TimerModel: ObservableObject {
@Published var counter = 0
var timer: Timer?
init() {
timer = Timer.scheduledTimer(withTimeInterval: 1.0, repeats: true) { _ in
self.counter += 1
}
}
deinit {
timer?.invalidate()
}
}
struct TimerView: View {
@StateObject private var timer = TimerModel()
var body: some View {
VStack {
Text("Timer: \(timer.counter)")
.font(.title)
Button("Reset") {
timer.counter = 0
}
.padding()
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(10)
}
}
}

复制代码

@EnvironmentObject

@EnvironmentObject用于在整个视图层次结构中共享数据：

class UserSettings: ObservableObject {
@Published var username = "Anonymous"
@Published var notificationEnabled = true
}
struct ProfileView: View {
@EnvironmentObject var settings: UserSettings
var body: some View {
VStack {
Text("Username: \(settings.username)")
Toggle("Notifications", isOn: $settings.notificationEnabled)
}
.padding()
}
}
struct ContentView: View {
@StateObject private var settings = UserSettings()
var body: some View {
NavigationView {
VStack {
TextField("Username", text: $settings.username)
.textFieldStyle(RoundedBorderTextFieldStyle())
.padding()
NavigationLink("View Profile", destination: ProfileView())
}
.navigationTitle("Settings")
}
.environmentObject(settings)
}
}

复制代码

列表和导航

列表视图

List视图用于显示可滚动的数据列表：

struct SimpleListView: View {
let fruits = ["Apple", "Banana", "Orange", "Mango", "Pineapple"]
var body: some View {
List(fruits, id: \.self) { fruit in
Text(fruit)
}
}
}

复制代码

可识别数据

使用符合Identifiable协议的数据模型：

struct TodoItem: Identifiable {
let id = UUID()
let title: String
var isCompleted: Bool
}
struct TodoListView: View {
@State private var todos = [
TodoItem(title: "Buy groceries", isCompleted: false),
TodoItem(title: "Finish project", isCompleted: true),
TodoItem(title: "Call mom", isCompleted: false)
]
var body: some View {
List {
ForEach($todos) { $todo in
HStack {
Text(todo.title)
Spacer()
if todo.isCompleted {
Image(systemName: "checkmark")
.foregroundColor(.green)
}
}
.onTapGesture {
todo.isCompleted.toggle()
}
}
.onDelete(perform: deleteTodos)
}
}
func deleteTodos(at offsets: IndexSet) {
todos.remove(atOffsets: offsets)
}
}

复制代码

分区列表

创建带有分区的列表：

struct SectionedListView: View {
let sections = [
Section(title: "Fruits", items: ["Apple", "Banana", "Orange"]),
Section(title: "Vegetables", items: ["Carrot", "Broccoli", "Spinach"])
]
var body: some View {
List {
ForEach(sections, id: \.title) { section in
Section(header: Text(section.title)) {
ForEach(section.items, id: \.self) { item in
Text(item)
}
}
}
}
}
}
struct Section: Identifiable {
let id = UUID()
let title: String
let items: [String]
}

复制代码

导航视图

使用NavigationView和NavigationLink创建导航结构：

struct MasterDetailView: View {
let items = ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"]
var body: some View {
NavigationView {
List(items, id: \.self) { item in
NavigationLink(destination: DetailView(item: item)) {
Text(item)
}
}
.navigationTitle("Items")
}
}
}
struct DetailView: View {
let item: String
var body: some View {
VStack {
Text("Detail for \(item)")
.font(.title)
.padding()
Spacer()
}
.navigationTitle(item)
.navigationBarTitleDisplayMode(.inline)
}
}

复制代码

标签栏视图

使用TabView创建标签栏界面：

struct TabBarView: View {
var body: some View {
TabView {
HomeView()
.tabItem {
Image(systemName: "house.fill")
Text("Home")
}
SearchView()
.tabItem {
Image(systemName: "magnifyingglass")
Text("Search")
}
ProfileView()
.tabItem {
Image(systemName: "person.fill")
Text("Profile")
}
}
}
}
struct HomeView: View {
var body: some View {
Text("Home Screen")
.font(.title)
}
}
struct SearchView: View {
var body: some View {
Text("Search Screen")
.font(.title)
}
}
struct ProfileView: View {
var body: some View {
Text("Profile Screen")
.font(.title)
}
}

复制代码

动画和过渡

基本动画

SwiftUI提供了简单的方法来为视图变化添加动画：

struct BasicAnimationView: View {
@State private var isAnimating = false
var body: some View {
VStack {
Circle()
.fill(Color.blue)
.frame(width: 100, height: 100)
.scaleEffect(isAnimating ? 1.5 : 1.0)
.animation(.easeInOut(duration: 1.0), value: isAnimating)
Button("Animate") {
isAnimating.toggle()
}
.padding()
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(10)
}
}
}

复制代码

隐式动画

使用.animation()修饰器为所有可动画的变化添加动画：

struct ImplicitAnimationView: View {
@State private var animationAmount: CGFloat = 1
var body: some View {
VStack {
Button("Tap Me") {
animationAmount += 1
}
.padding(40)
.background(Color.red)
.foregroundColor(.white)
.clipShape(Circle())
.scaleEffect(animationAmount)
.blur(radius: (animationAmount - 1) * 3)
.animation(.default, value: animationAmount)
}
}
}

复制代码

显式动画

使用withAnimation函数明确指定哪些变化应该有动画：

struct ExplicitAnimationView: View {
@State private var isShowingRed = false
var body: some View {
VStack {
Button("Toggle") {
withAnimation {
isShowingRed.toggle()
}
}
if isShowingRed {
Rectangle()
.fill(Color.red)
.frame(width: 200, height: 200)
.transition(.asymmetric(
insertion: .scale,
removal: .opacity
))
}
}
}
}

复制代码

自定义动画

创建自定义动画曲线和效果：

struct CustomAnimationView: View {
@State private var animationAmount = 0.0
var body: some View {
VStack {
// 自定义弹簧动画
Button("Spring Animation") {
animationAmount += 1
}
.padding(50)
.background(Color.green)
.foregroundColor(.white)
.clipShape(Circle())
.overlay(
Circle()
.stroke(Color.green)
.scaleEffect(animationAmount)
.opacity(Double(2 - animationAmount))
.animation(
Animation.spring(response: 1, dampingFraction: 0.5, blendDuration: 0)
.repeatForever(autoreverses: false),
value: animationAmount
)
)
// 自定义定时动画
Button("Custom Timing") {
withAnimation(
Animation.timingCurve(0.2, 0.8, 0.2, 1, duration: 1.5)
) {
animationAmount += 1
}
}
.padding()
.background(Color.purple)
.foregroundColor(.white)
.cornerRadius(10)
}
}
}

复制代码

实战案例：构建一个天气应用界面

让我们综合运用前面学到的知识，构建一个完整的天气应用界面。

数据模型

首先，定义天气数据模型：

struct WeatherData: Identifiable {
let id = UUID()
let day: String
let date: String
let highTemperature: Int
let lowTemperature: Int
let weatherType: WeatherType
let precipitationChance: Int
}
enum WeatherType: String, CaseIterable {
case sunny = "sun.max.fill"
case cloudy = "cloud.fill"
case rainy = "cloud.rain.fill"
case snowy = "cloud.snow.fill"
case stormy = "cloud.bolt.rain.fill"
var color: Color {
switch self {
case .sunny: return .yellow
case .cloudy: return .gray
case .rainy: return .blue
case .snowy: return .cyan
case .stormy: return .purple
}
}
}

复制代码

主视图

创建主视图，显示当前天气和预报：

struct WeatherAppView: View {
@State private var currentLocation = "New York, NY"
@State private var currentTemp = 72
@State private var feelsLike = 75
@State private var humidity = 65
@State private var windSpeed = 8
@State private var currentWeather = WeatherType.sunny
private let forecastData = [
WeatherData(day: "Today", date: "Jun 12", highTemperature: 75, lowTemperature: 62, weatherType: .sunny, precipitationChance: 10),
WeatherData(day: "Wed", date: "Jun 13", highTemperature: 78, lowTemperature: 64, weatherType: .cloudy, precipitationChance: 20),
WeatherData(day: "Thu", date: "Jun 14", highTemperature: 82, lowTemperature: 68, weatherType: .sunny, precipitationChance: 5),
WeatherData(day: "Fri", date: "Jun 15", highTemperature: 80, lowTemperature: 67, weatherType: .rainy, precipitationChance: 80),
WeatherData(day: "Sat", date: "Jun 16", highTemperature: 76, lowTemperature: 63, weatherType: .stormy, precipitationChance: 90),
WeatherData(day: "Sun", date: "Jun 17", highTemperature: 74, lowTemperature: 61, weatherType: .rainy, precipitationChance: 60),
WeatherData(day: "Mon", date: "Jun 18", highTemperature: 77, lowTemperature: 64, weatherType: .cloudy, precipitationChance: 30)
]
var body: some View {
ZStack {
// 背景渐变
LinearGradient(gradient: Gradient(colors: [Color.blue.opacity(0.6), Color.blue.opacity(0.3)]), startPoint: .topLeading, endPoint: .bottomTrailing)
.ignoresSafeArea()
ScrollView {
VStack(spacing: 20) {
// 位置和当前温度
currentWeatherView
// 天气详情
weatherDetailsView
// 每小时预报
hourlyForecastView
// 7天预报
sevenDayForecastView
}
.padding()
}
}
}
private var currentWeatherView: some View {
VStack(spacing: 10) {
HStack {
VStack(alignment: .leading) {
Text(currentLocation)
.font(.title)
.fontWeight(.bold)
Text("Today, \(Date().formatted(.dateTime.month().day()))")
.font(.subheadline)
.foregroundColor(.secondary)
}
Spacer()
Button(action: {
// 刷新天气数据
}) {
Image(systemName: "arrow.clockwise")
.font(.title2)
.padding(8)
.background(Color.white.opacity(0.2))
.clipShape(Circle())
}
}
HStack {
VStack(alignment: .leading, spacing: 5) {
Text("\(currentTemp)°")
.font(.system(size: 70, weight: .bold))
Text("Feels like \(feelsLike)°")
.font(.subheadline)
.foregroundColor(.secondary)
}
Spacer()
Image(systemName: currentWeather.rawValue)
.font(.system(size: 60))
.foregroundColor(currentWeather.color)
}
}
.padding()
.background(Color.white.opacity(0.2))
.cornerRadius(20)
}
private var weatherDetailsView: some View {
HStack(spacing: 20) {
WeatherDetailItem(icon: "humidity.fill", title: "Humidity", value: "\(humidity)%")
WeatherDetailItem(icon: "wind", title: "Wind", value: "\(windSpeed) mph")
WeatherDetailItem(icon: "umbrella.fill", title: "Precip", value: "10%")
}
.padding()
.background(Color.white.opacity(0.2))
.cornerRadius(20)
}
private var hourlyForecastView: some View {
VStack(alignment: .leading, spacing: 10) {
Text("Hourly Forecast")
.font(.headline)
.fontWeight(.bold)
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 15) {
ForEach(0..<24) { hour in
HourlyWeatherView(
time: hour == 0 ? "Now" : "\(hour % 12 == 0 ? 12 : hour % 12)\(hour < 12 || hour == 24 ? "AM" : "PM")",
temp: currentTemp + Int.random(in: -5...5),
icon: WeatherType.allCases.randomElement()!
)
}
}
.padding(.vertical, 5)
}
}
.padding()
.background(Color.white.opacity(0.2))
.cornerRadius(20)
}
private var sevenDayForecastView: some View {
VStack(alignment: .leading, spacing: 10) {
Text("7-Day Forecast")
.font(.headline)
.fontWeight(.bold)
ForEach(forecastData) { day in
HStack {
Text(day.day)
.frame(width: 50, alignment: .leading)
Text(day.date)
.font(.caption)
.foregroundColor(.secondary)
Spacer()
Image(systemName: day.weatherType.rawValue)
.foregroundColor(day.weatherType.color)
Text("\(day.precipitationChance)%")
.font(.caption)
.foregroundColor(.blue)
Text("\(day.lowTemperature)°")
.foregroundColor(.secondary)
Text("\(day.highTemperature)°")
.fontWeight(.bold)
}
.padding(.vertical, 5)
}
}
.padding()
.background(Color.white.opacity(0.2))
.cornerRadius(20)
}
}
struct WeatherDetailItem: View {
let icon: String
let title: String
let value: String
var body: some View {
VStack(spacing: 5) {
Image(systemName: icon)
.font(.title2)
Text(title)
.font(.caption)
.foregroundColor(.secondary)
Text(value)
.font(.headline)
.fontWeight(.bold)
}
.frame(maxWidth: .infinity)
}
}
struct HourlyWeatherView: View {
let time: String
let temp: Int
let icon: WeatherType
var body: some View {
VStack(spacing: 5) {
Text(time)
.font(.caption)
Image(systemName: icon.rawValue)
.font(.title3)
.foregroundColor(icon.color)
Text("\(temp)°")
.font(.headline)
}
.padding(.horizontal, 10)
.padding(.vertical, 5)
.background(Color.white.opacity(0.1))
.cornerRadius(10)
}
}

复制代码

预览

添加预览代码：

struct WeatherAppView_Previews: PreviewProvider {
static var previews: some View {
WeatherAppView()
}
}

复制代码

这个天气应用界面展示了SwiftUI的多个关键特性：

• 使用VStack、HStack和ZStack进行布局
• 使用ScrollView创建可滚动内容
• 使用自定义视图组件（如WeatherDetailItem和HourlyWeatherView）
• 使用@State管理界面状态
• 使用渐变背景和透明度创建视觉效果
• 使用条件渲染和循环来显示动态内容

最佳实践和性能优化

视图组合与重用

将UI分解为小型、可重用的组件：

// 可重用的卡片组件
struct CardView<Content: View>: View {
let content: Content
init(@ViewBuilder content: () -> Content) {
self.content = content()
}
var body: some View {
content
.padding()
.background(Color.white)
.cornerRadius(10)
.shadow(color: Color.black.opacity(0.1), radius: 5, x: 0, y: 2)
}
}
// 使用卡片组件
struct ContentView: View {
var body: some View {
VStack(spacing: 20) {
CardView {
Text("This is a card")
.font(.headline)
Text("Cards are a great way to group related content")
.font(.subheadline)
.foregroundColor(.secondary)
}
CardView {
HStack {
Image(systemName: "star.fill")
.foregroundColor(.yellow)
Text("Another card with an icon")
.fontWeight(.bold)
Spacer()
}
}
}
.padding()
}
}

复制代码

惰性加载

对于大型列表或复杂视图，使用惰性加载提高性能：

struct LazyLoadingExample: View {
let items = (1...1000).map { "Item \($0)" }
var body: some View {
ScrollView {
// 惰性垂直堆栈
LazyVStack(spacing: 10) {
ForEach(items, id: \.self) { item in
Text(item)
.padding()
.background(Color.blue.opacity(0.2))
.cornerRadius(8)
}
}
.padding()
}
// 惰性网格
ScrollView {
LazyVGrid(columns: [
GridItem(.flexible()),
GridItem(.flexible()),
GridItem(.flexible())
], spacing: 10) {
ForEach(items, id: \.self) { item in
Text(item)
.padding()
.background(Color.green.opacity(0.2))
.cornerRadius(8)
}
}
.padding()
}
}
}

复制代码

避免不必要的重绘

使用.equatable()协议和@Equatable属性包装器减少不必要的视图更新：

struct EquatableView: View, Equatable {
let title: String
let value: Int
var body: some View {
HStack {
Text(title)
Spacer()
Text("\(value)")
.fontWeight(.bold)
}
.padding()
.background(Color.blue.opacity(0.1))
.cornerRadius(8)
}
// 实现相等性判断，只有当title和value都改变时才更新视图
static func == (lhs: EquatableView, rhs: EquatableView) -> Bool {
return lhs.title == rhs.title && lhs.value == rhs.value
}
}
struct ParentView: View {
@State private var counter = 0
@State private var title = "Counter"
var body: some View {
VStack {
EquatableView(title: title, value: counter)
Button("Increment") {
counter += 1
}
.padding()
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(8)
Button("Change Title") {
title = "New Title"
}
.padding()
.background(Color.green)
.foregroundColor(.white)
.cornerRadius(8)
}
.padding()
}
}

复制代码

合理使用状态管理

根据场景选择合适的状态管理方式：

// @State: 用于简单视图的本地状态
struct StateExample: View {
@State private var isOn = false
var body: some View {
Toggle("Switch", isOn: $isOn)
.padding()
}
}
// @ObservedObject: 用于观察外部对象，可能会被销毁和重建
class Settings: ObservableObject {
@Published var fontSize: Double = 16.0
}
struct ObservedObjectExample: View {
@ObservedObject var settings = Settings()
var body: some View {
VStack {
Slider(value: $settings.fontSize, in: 12...24)
Text("Font size: \(Int(settings.fontSize))")
}
.padding()
}
}
// @StateObject: 用于拥有并管理可观察对象的生命周期
class Counter: ObservableObject {
@Published var value = 0
func increment() {
value += 1
}
}
struct StateObjectExample: View {
@StateObject private var counter = Counter()
var body: some View {
VStack {
Text("Count: \(counter.value)")
Button("Increment") {
counter.increment()
}
}
.padding()
}
}
// @EnvironmentObject: 用于在视图层次结构中共享数据
struct EnvironmentObjectExample: View {
var body: some View {
NavigationView {
ParentView()
.environmentObject(Counter())
}
}
}
struct ParentView: View {
var body: some View {
NavigationLink("Go to Child", destination: ChildView())
}
}
struct ChildView: View {
@EnvironmentObject var counter: Counter
var body: some View {
VStack {
Text("Count: \(counter.value)")
Button("Increment") {
counter.increment()
}
}
.padding()
}
}

复制代码

使用自定义修饰器

创建自定义修饰器来重用视图修饰逻辑：

// 自定义标题样式修饰器
struct TitleStyle: ViewModifier {
func body(content: Content) -> some View {
content
.font(.largeTitle)
.fontWeight(.bold)
.foregroundColor(.primary)
.padding(.bottom, 10)
}
}
// 自定义卡片样式修饰器
struct CardStyle: ViewModifier {
func body(content: Content) -> some View {
content
.padding()
.background(Color.white)
.cornerRadius(10)
.shadow(color: Color.black.opacity(0.1), radius: 5, x: 0, y: 2)
}
}
// 扩展View以方便使用修饰器
extension View {
func titleStyle() -> some View {
self.modifier(TitleStyle())
}
func cardStyle() -> some View {
self.modifier(CardStyle())
}
}
// 使用自定义修饰器
struct CustomModifierExample: View {
var body: some View {
VStack {
Text("Welcome to SwiftUI")
.titleStyle()
Text("Custom modifiers help reuse styling code")
.cardStyle()
}
.padding()
}
}

复制代码

总结和进阶学习资源

总结

SwiftUI是苹果推出的现代化UI框架，它通过声明式语法和强大的组合能力，极大地简化了iOS、macOS、watchOS和tvOS应用的开发过程。在本教程中，我们学习了：

1. SwiftUI基础知识和语法结构
2. 常用UI组件的使用方法
3. 布局系统和视图组合
4. 状态管理和数据流
5. 列表和导航的实现
6. 动画和过渡效果
7. 通过实战案例构建完整应用界面
8. 性能优化和最佳实践

掌握SwiftUI需要不断练习和探索。随着经验的积累，您将能够更加高效地构建美观、响应式的苹果应用界面。

进阶学习资源

要进一步提升SwiftUI技能，可以参考以下资源：

• Apple SwiftUI Documentation
• Apple SwiftUI Tutorials
• Swift by Sundell SwiftUI Collection

• “SwiftUI by Tutorials” by raywenderlich.com
• “SwiftUI for Masterminds” by J.D. Gauchat
• “Pro SwiftUI” by Steven F. Daniel

• Udemy - SwiftUI Masterclass
• Coursera - SwiftUI iOS Application Development
• Hacking with Swift - SwiftUI

• Awesome SwiftUI- 精选的SwiftUI资源列表
• SwiftUI-Examples- SwiftUI示例代码集合
• SwiftUIX- 扩展和增强SwiftUI功能的开源库

• SwiftUI Subreddit
• Apple Developer Forums
• Stack Overflow

通过结合理论学习和实践项目，您将能够逐步掌握SwiftUI的高级特性，并成为一名高效的苹果应用界面开发者。祝您学习愉快！

	通知：2026夏日主题满意度调查	06-22 18:10
	通知：微软邮箱更换提醒	06-14 00:00
	通知：本站资源由网友上传分享，如有违规等问题请到版务模块进行投诉，资源失效请在帖子内回复要求补档，会尽快处理！	10-23 09:31

活动公告

SwiftUI UI设计实战教程轻松掌握现代苹果应用界面开发技巧

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

塔罗

立华奏

站长推荐 /2

友情链接

Tencent QQ