【SwiftUI入门练中学】第1课 从零开始

本课目标装好 Xcode创建第一个 SwiftUI 项目认识Text、Image、Button、VStack、HStack、State、#Preview并完成一个能点击交互的小计数器。本课产出一个可以运行的你好SwiftUIApp带计数器和样式调整。一、先建立三个正确认知初学者最容易在开头卡住先澄清三件事。认知 1SwiftUI 是声明式 UI你描述界面应该是什么样系统负责怎么画、怎么更新。你不需要手动操作界面元素。// 传统写法UIKit命令式一步步告诉系统怎么做label.text你好view.addSubview(label)label.frameCGRect(x:20,y:100,width:200,height:30)// SwiftUI声明式直接描述结果Text(你好)认知 2状态驱动界面界面不是改一次就固定而是状态变了界面自动跟着变。这是 SwiftUI 最核心的思想第1课就要建立。Stateprivatevarcount0// 状态Text(计数\(count))// 界面随 count 自动更新认知 3视图是结构体不是类SwiftUI 的视图是struct遵循View协议必须实现body属性。structContentView:View{// 结构体 遵循 Viewvarbody:someView{// 必须实现 bodyText(Hello)}}记住这三条后面学起来会顺很多。二、准备安装 Xcode步骤 1安装打开 Mac 的App Store搜索Xcode点击安装。Xcode 体积较大约 10-15 GB建议预留足够空间用稳定网络下载。步骤 2首次启动安装完成后打开 Xcode同意许可协议。输入 Mac 密码等待安装附加组件。看到欢迎界面即成功。步骤 3检查版本菜单Xcode → About Xcode确认版本。本课需要Xcode 15 或更高对应 iOS 17。常见问题问题解决下载卡住换网络或从 developer.apple.com 下载提示空间不足清理磁盘预留至少 30 GB启动慢首次启动会安装组件耐心等待三、创建第一个项目步骤 1新建项目Xcode 菜单File → New → Project或Cmd Shift N。选择iOS → App点击 Next。步骤 2填写项目信息字段填写Product NameHelloSwiftUITeam选个人账号没有可留空Organization Identifiercom.yournameInterfaceSwiftUILanguageSwiftStorageNone本课不需要Include Tests可勾选点击 Next选择保存位置创建。步骤 3认识界面创建后 Xcode 会显示┌──────────────────────────────────────────────┐ │ 顶部工具栏运行、停止、Scheme、设备选择 │ ├────────────┬─────────────────────┬───────────┤ │ 左侧导航栏 │ 中间编辑器 │ 右侧检查器 │ │ 文件列表 │ ContentView.swift │ 属性面板 │ ├────────────┴─────────────────────┴───────────┤ │ 底部控制台 / 问题 / 测试 │ └──────────────────────────────────────────────┘步骤 4认识项目结构HelloSwiftUI/ ├── HelloSwiftUIApp.swift // App 入口 ├── ContentView.swift // 主视图 └── Assets.xcassets // 资源图标、颜色打开ContentView.swift你会看到importSwiftUIstructContentView:View{varbody:someView{VStack{Image(systemName:globe).imageScale(.large).foregroundStyle(.tint)Text(Hello, world!)}.padding()}}#Preview{ContentView()}步骤 5运行点击顶部▶️按钮或Cmd RXcode 会启动模拟器显示你的第一个 App。常见问题问题解决模拟器启动慢首次启动需要几分钟耐心等待提示签名错误在 Signing Capabilities 选 Team预览不显示菜单 Editor → Canvas 打开预览四、逐行理解第一段代码importSwiftUI// 导入 SwiftUI 框架才能使用 View、Text、VStack 等类型structContentView:View{// 定义一个视图结构体并遵循 View 协议varbody:someView{// body 是视图必须实现的属性用来描述界面内容VStack{// VStack垂直堆叠容器子视图从上到下排列Image(systemName:globe)// 使用 SF Symbols 显示一个地球图标.imageScale(.large)// 设置图标大小.foregroundStyle(.tint)// 设置图标颜色为主题色Text(Hello, world!)// 显示一段文本}.padding()// 给 VStack 四周增加默认内边距让内容不贴边}}#Preview{// Xcode 预览宏用于实时查看界面效果ContentView()// 预览 ContentView}关键点import SwiftUI导入框架必须写在文件顶部。struct ContentView: View视图是结构体必须遵循View协议。var body: some Viewbody是计算属性返回视图。VStack容器垂直排列子视图。.padding()修饰符给视图增加内边距。#Preview预览宏实时看效果。五、动手改一改从静态到交互第一版改文字和图标把Text(Hello, world!)改成Text(你好SwiftUI).font(.largeTitle).foregroundStyle(.blue)把Image(systemName: globe)改成Image(systemName:swift).font(.system(size:50)).foregroundStyle(.orange)预览会立即更新这就是 SwiftUI 的实时反馈。第二版加一个按钮在VStack中加Button(点我){print(按钮被点击)}.buttonStyle(.borderedProminent)运行后点击按钮控制台会打印消息。第三版加入状态在ContentView中加状态Stateprivatevarcount0在VStack中加Text(计数\(count))Button(加一){count1}.buttonStyle(.borderedProminent)点击按钮数字会实时变化。State让视图响应数据变化。第四版完整计数器importSwiftUIstructContentView:View{// State声明视图内部状态值变化后会自动刷新界面// private表示这个状态只在本视图内部使用Stateprivatevarcount0varbody:someView{VStack(spacing:16){// 垂直排列间距 16Image(systemName:swift).font(.system(size:50)).foregroundStyle(.orange)Text(你好SwiftUI).font(.largeTitle).foregroundStyle(.blue)Text(计数\(count))// 字符串插值显示 countHStack(spacing:12){// 水平排列Button(加一){count1}.buttonStyle(.borderedProminent)Button(减一){count-1}.buttonStyle(.bordered)Button(重置){count0}.buttonStyle(.bordered)}}.padding()}}#Preview{ContentView()}六、进阶切换颜色importSwiftUIstructContentView:View{Stateprivatevarcount0StateprivatevarisBluetrue// 布尔状态控制颜色varbody:someView{VStack(spacing:16){Text(计数\(count)).font(.largeTitle)// 三元运算符isBlue 为 true 时用蓝色否则用橙色.foregroundStyle(isBlue?Color.blue:Color.orange)HStack(spacing:12){Button(加一){count1}.buttonStyle(.borderedProminent)Button(切换颜色){isBlue.toggle()// 在 true 和 false 间切换}.buttonStyle(.bordered)}}.padding()}}#Preview{ContentView()}七、常见错误与排查错误原因解决Cannot find Text in scope忘了import SwiftUI在文件顶部加import SwiftUIType ContentView does not conform to protocol View没实现body补上var body: some ViewCannot assign to property: count is a let constant用let声明了状态改用State private var按钮点了没反应忘了State加State修饰预览不更新预览被暂停点预览区右上角Resume编译错误找不到看底部问题面板点红色错误定位八、习题、答案与解读选择题题1SwiftUI 中一个视图类型通常用哪个关键字声明A. class B. struct C. enum D. protocol答案B解读SwiftUI 视图通常是struct轻量且值语义适合描述 UI。题2让Text随数据变化自动更新通常用哪个属性包装器A.StateB.BindingC.ObservedObjectD.Environment答案A解读State用于视图内部简单状态变化后会触发body重新计算。题3设置文字颜色较新的写法是A..colorB..foregroundStyleC..tintD..background答案B解读.foregroundStyle(.blue)是较新的前景色设置方式。题4新建 SwiftUI 项目时Interface 应选A. Storyboard B. SwiftUI C. UIKit D. Objective-C答案B解读新建 iOS App 时Interface 选 SwiftUI。题5下列哪个是垂直布局容器A.HStackB.ZStackC.VStackD.List答案C解读VStack垂直排列子视图。判断题题1SwiftUI 是声明式 UI。答案对解读你描述界面应该是什么样SwiftUI 负责根据状态更新。题2State private var count 0中private不是必须但推荐。答案对解读private防止外部误改状态。题3修改静态文字必须用State。答案错解读静态文字直接写Text(你好)即可。题4Image(systemName: swift)可以显示系统图标。答案对解读systemName使用 SF Symbols 图标库。题5body中通常返回一个视图多条内容可用VStack包裹。答案对解读body需要返回单个视图。填空题题1视图必须实现var ______: some View。答案body题2按钮点击事件写在Button(标题) { ______ }中。答案点击后要执行的代码题3让视图四周留白用.______()。答案padding题4显示变量count用字符串插值Text(计数______)。答案\(count)题5实时预览常用宏______ { ContentView() }。答案#Preview改错题题1structContentView{varbody:someView{Text(你好)}}答案structContentView:View{varbody:someView{Text(你好)}}解读视图必须遵循View协议。题2structContentView:View{varbody:someView{VStack{Text(计数\(count))Button(加一){count1}}.padding()}}答案在body前添加Stateprivatevarcount0解读count未定义而且它需要驱动界面更新所以要用State。题3structContentView:View{varbody:someView{VStack{Text(你好)}padding()}}答案structContentView:View{varbody:someView{VStack{Text(你好)}.padding()}}解读SwiftUI 修饰符要用点语法.padding()。代码预测题structContentView:View{Stateprivatevarcount0varbody:someView{VStack{Text(计数\(count))Button(加一){count1}}}}问题点击加一3 次后界面显示什么答案计数3解读每次点击执行count 1State触发body重新计算。编程题题1制作个人名片包含图标、名字和一句自我介绍。参考代码structContentView:View{varbody:someView{VStack(spacing:16){Image(systemName:person.circle).font(.system(size:60))Text(小明).font(.title)Text(正在学习 SwiftUI).foregroundStyle(.blue)}.padding()}}题2制作计数器支持加一、减一、重置。参考代码structContentView:View{Stateprivatevarcount0varbody:someView{VStack(spacing:16){Text(计数\(count))HStack{Button(加一){count1}Button(减一){count-1}Button(重置){count0}}}.padding()}}题3加一个按钮点击后切换文字颜色。参考代码structContentView:View{StateprivatevarisBluetruevarbody:someView{VStack(spacing:16){Text(我会变色).foregroundStyle(isBlue?Color.blue:Color.orange)Button(切换颜色){isBlue.toggle()}.buttonStyle(.borderedProminent)}.padding()}}开放思考题题1为什么 SwiftUI 常用struct描述视图参考struct值语义轻量适合描述 UI状态驱动减少手动同步。题2State为什么常写成private参考private防止外部误改状态应由视图自己管理。题3Xcode 预览对开发效率有什么帮助参考预览能实时查看效果减少反复编译运行。九、全课知识点总结认知SwiftUI 是声明式 UI描述结果不描述过程。状态驱动界面状态变了界面自动更新。视图是结构体遵循View协议。核心 APIimport SwiftUI导入框架。struct ContentView: View定义视图。var body: some View描述界面。Text显示文字。Image(systemName:)显示系统图标。Button按钮闭包响应点击。VStack垂直排列。HStack水平排列。State视图内部状态。#Preview实时预览。修饰符.font(.largeTitle)字体。.foregroundStyle(.blue)前景色。.padding()内边距。.buttonStyle(.borderedProminent)按钮样式。字符串插值Text(计数\(count))把变量嵌入文本。常见错误忘了import SwiftUI忘了: View用let声明状态忘了State修饰符忘了点本课达标标准能独立创建 SwiftUI 项目修改文字和图标添加按钮用State做计数器能通过预览实时查看效果能识别并解决常见错误。下一课预告第2课学习VStack、HStack、ZStack三种布局容器搭建更复杂的界面。