适合Java(Android) JS(Vue/React)开发者。目标看完知道 iOS 有哪些组件、对应什么、什么时候用。推荐学习 SwiftUIUIKit 只需要认识即可很多老项目还在用。一、整体层级一个 App 大概就是这样App │ NavigationStack │ View ├── Text ├── Image ├── Button ├── TextField ├── List ├── ScrollView ├── VStack ├── HStack └── ZStack可以理解成HTML ↓ body ↓ div ↓ button ↓ img ↓ input二、布局组件最重要VStack垂直排列VStack{Text(A)Text(B)}效果A B对应CSS display:flex; flex-direction:column;AndroidLinearLayout verticalHStack水平排列HStack{Text(A)Text(B)}效果A B对应display:flex; flex-direction:row;ZStack层叠ZStack{Image()Text()}类似position:absolute或者 AndroidFrameLayoutSpacer占满剩余空间HStack{Text(左)Spacer()Text(右)}效果左 右等于 CSSjustify-content:space-between三、文本TextText(Hello)修改Text(Hello).font(.title).bold().foregroundStyle(.red)对应 HTMLspan p四、图片Image本地Image(logo)SF SymbolsImage(systemName:house)网络图片一般使用AsyncImageAsyncImage(url:url)五、按钮Button(登录){}或者Button{}label:{Text(登录)}对应button六、输入框TextFieldTextField(请输入用户名,text:$username)密码SecureField(密码,text:$password)对应input七、文本编辑TextEditor(text:$content)对应textarea八、开关Toggle(开启通知,isOn:$isOpen)对应AndroidSwitchHTMLcheckbox九、选择器PickerPicker(城市,selection:$city){Text(北京)Text(上海)}类似select十、SliderSlider(value:$progress)对应SeekBar十一、Stepper数字加减Stepper(value:$count){Text(\(count))}十二、DatePickerDatePicker(日期,selection:$date)日期选择。十三、ProgressView加载ProgressView()进度ProgressView(value:0.5)十四、List★★★★★最常用。List(users){userinText(user.name)}就是RecyclerView UITableView也是HTML ul li十五、ScrollView滚动ScrollView{}横向ScrollView(.horizontal){}十六、LazyVStack大量数据使用ScrollView{LazyVStack{}}类似RecyclerView按需加载。十七、Grid网格LazyVGrid(...)对应GridLayout CSS Grid十八、NavigationStack★★★★★导航NavigationStack{HomeView()}进入页面NavigationLink(详情){DetailView()}就是push pop十九、TabView★★★★★底部导航TabView{Home()Profile()}对应BottomNavigationView TabBar二十、Sheet弹窗.sheet(isPresented:$show){Detail()}底部弹出。二十一、Alert提示框.alert(title,isPresented:$show){}二十二、ConfirmationDialog操作菜单类似ActionSheet二十三、Menu右键菜单Menu{}二十四、Popover小气泡iPad 使用较多。二十五、Toolbar导航栏按钮.toolbar{}二十六、Form表单Form{}自动分组。设置页大量使用。二十七、Section分组Section{}List 中经常使用。二十八、Divider分割线Divider()二十九、Group逻辑分组。不会增加布局。三十、常见 Modifier修饰符所有 View 都能调用。大小.frame()内边距.padding()背景.background()圆角.cornerRadius()边框.border()阴影.shadow()透明.opacity()隐藏.hidden()点击.onTapGesture{}长按.onLongPressGesture{}生命周期.onAppear{}.onDisappear{}动画.animation()三十一、状态管理★★★★★变量State父子绑定Binding共享对象StateObjectObservedObjectEnvironmentObject开发天天写。三十二、页面生命周期进入页面.onAppear{}离开页面.onDisappear{}类似onResume onPause三十三、最常见页面组合登录页NavigationStack ↓ VStack ↓ Image ↓ TextField ↓ SecureField ↓ Button列表页NavigationStack ↓ List ↓ NavigationLink详情页ScrollView ↓ VStack ↓ Image ↓ Text ↓ Button个人中心NavigationStack ↓ List ↓ Section ↓ NavigationLink商城首页NavigationStack ↓ ScrollView ↓ LazyVStack ↓ LazyVGrid三十四、UIKit 对照老项目SwiftUIUIKitViewUIViewTextUILabelImageUIImageViewButtonUIButtonTextFieldUITextFieldTextEditorUITextViewListUITableViewLazyVGridUICollectionViewNavigationStackUINavigationControllerTabViewUITabBarControllerAlertUIAlertControllerSheetPresent ViewControllerScrollViewUIScrollViewToggleUISwitchSliderUISliderPickerUIPickerViewProgressViewUIProgressViewDatePickerUIDatePicker三十五、开发中每天都会写的组件按优先级⭐⭐⭐⭐⭐必须掌握NavigationStackVStackHStackSpacerTextImageButtonTextFieldListScrollViewNavigationLinkTabView.padding().frame().background().toolbar()State⭐⭐⭐⭐经常用LazyVStackLazyVGridSectionFormProgressViewAlertSheetDividerTogglePickerAsyncImage⭐⭐⭐按需掌握TextEditorSliderStepperDatePickerConfirmationDialogMenuPopoverGroup最后给前端/Android 开发者的思维转换Web/AndroidSwiftUIdivVStack / HStack / ZStackspan / pTextimgImagebuttonButtoninputTextFieldtextareaTextEditorul/liListRecyclerViewList / LazyVStackGridLayoutLazyVGridflex-columnVStackflex-rowHStackposition:absoluteZStackRouterNavigationStackBottomNavigationTabViewDialogAlert / SheetStateReact/VueStatePropsBindingGlobal StoreEnvironmentObject一句话总结如果你已经熟悉前端或 Android可以把 SwiftUI 理解为布局 FlexVStack/HStack/ZStack页面 React/Vue 的组件View状态 React HooksState、Binding导航 RouterNavigationStack列表 RecyclerView /v-forList、ForEach掌握这些核心组件就已经能完成绝大多数企业级 iOS 应用页面开发。
