SwiftUI

课程章节导航区：

第一章 常用的Views

第1节：SwiftUI空白项目的创建步骤：

1、打开Xcode，然后使用菜单命令:File > New > Project命令，打开项目创建窗口。
2、在项目模板选择窗口中，选择Single View App模板，然后点击Next按钮，进入下一步设置窗口。
3、在项目配置窗口中，需要勾选Use SwiftUI复选框，然后填写其它的配置选项，点击Next按钮，完成项目的创建。
4、SwiftUI项目创建完成之后，其项目结构和代码功能如下图所示：

5、项目导航区：

文件名称	说明
AppDelegate.swift	提供didFinishLaunchingWithOptions等方法，用来处理程序启动之后的事件，或者响应来自外部的事件。
SceneDelegate.swift	设置应用程序窗口的rootViewController，并指定使用哪个ContentView作为rootViewController的rootView。
ContentView.swift	项目的初始界面，用户界面上的可视控件可以放置在此文件中。
Assets.xcassets	项目的资源文件，您可以在此处放置项目中所需的图片、颜色等资源。
LaunchScreen.storyboard	用来配置项目启动过程中所显示的内容。
Info.plist	项目的配置属性文件，配置产品名称、版本号、Build号、Bundle Identifier等项目。

6、代码编辑器：

• SwiftUI使用声明性语法，因此开发者可以简单地说明用户界面应该做什么。
• 例如，您可以编写需要包含文本字段的项目列表，然后描述每个字段的对齐方式，字体和颜色。
• 您的代码比以前更简单，更易于阅读，从而节省您的时间和维护。

7、ContentView.swift代码说明：

//导入SwiftUI框架import SwiftUI              //定义一个名为ContentView的结构体，该结构体遵循View协议，遵循View协议的元素才可以在SwiftUI框架中。就像在UIKit中，所见皆UIView一样，在SwiftUI中，所见皆是View。structContentView:View{ //添加View协议中的body属性，在body属性中通过SwiftUI提供的各种布局控件，完成界面元素的搭建。关键词some表示返回的是某种View，但是SwiftUI不需要在意是具体的哪种Viewvarbody:someView{    //在屏幕上显示一个标签，标签的内容位于双引号之内Text("Hello World")}}//当处于Debug模式时，允许执行下方的代码#if DEBUG//定义一个遵循PreviewProvider的结构体，用于设置在右侧预览区需要实时预览的内容structContentView_Previews:PreviewProvider{//添加PreviewProvider协议中的previews属性，用来设置在实时预览区显示的内容staticvarpreviews:someView{    //设置在实时预览区显示ContentView结构体中的内容，您还可以在此设置预览的模拟器尺寸、是否Dark Mode等选项。ContentView()}}#endif

8、SceneDelegate.swift代码说明：

//使用此方法可以选择性地配置UIWindow窗口，并将其附加到提供的UIWindowScenefunc scene(_ scene:UIScene, willConnectTo session:UISceneSession, options connectionOptions:UIScene.ConnectionOptions){iflet windowScene= sceneas?UIWindowScene{    //初始化一个UIWindow窗口对象letwindow=UIWindow(windowScene: windowScene)    // 使用一个UIHostingController实例，作为该窗口的根 view controller            window.rootViewController=UIHostingController(rootView:ContentView())    // 将新建的窗口作为当前程序的窗口对象self.window= window    // 将窗口作为主窗口并显示            window.makeKeyAndVisible()}}

第2节：Text-BasicStyle：

VStack{    //Basic styleText("www.hdjc8.com").bold()Text("www.hdjc8.com").italic()Text("www.hdjc8.com").underline()Text("www.hdjc8.com").underline(true, color:.orange)Text("www.hdjc8.com").strikethrough()Text("www.hdjc8.com").strikethrough(true, color:.orange)Text("www.hdjc8.com").foregroundColor(Color.orange)Text("www.hdjc8.com").baselineOffset(CGFloat(5.0)).background(Color.orange)Text("www.hdjc8.com").background(Image("Picture"), alignment:.bottom)    //FontVStack{Text("www.hdjc8.com").font(.footnote)Text("www.hdjc8.com").font(.system(size:36))Text("www.hdjc8.com").font(.system(.title, design:.monospaced))Text("www.hdjc8.com").font(.custom("BradleyHandITCTT-Bold", size:36))Text("www.hdjc8.com").fontWeight(Font.Weight.heavy)Text("www.hdjc8.com").fontWeight(Font.Weight.ultraLight)}}

第3节：Text-Paragraph：

VStack{Text("www.hdjc8.com")Text("www.hdjc8.com").tracking(10)Text("www.hdjc8.com").kerning(10)Text("www.hdjc8.com").blur(radius:1)Text("SwiftUI is an innovative, exceptionally simple way to build user interfaces across all Apple platforms with the power of Swift.").lineSpacing(20)//                .lineLimit(1).lineLimit(nil)Text("www.hdjc8.com").offset(x:40, y:0)Text("www.hdjc8.com").frame(width:200, height:80, alignment:.bottomTrailing).background(Color.orange)VStack{Text("www.hdjc8.com2").position(x:50, y:50).frame(width:300, height:100, alignment:.bottomTrailing).background(Color.orange)Text("Interactive\ntutorials\nfor\nXcode!").multilineTextAlignment(.center).lineLimit(4)Text("Hello\nInteractive Tutorials!").multilineTextAlignment(.leading)}}

第4节：Text-Padding：

VStack{Text("www.hdjc8.com").background(Color.black).foregroundColor(.white).padding(20)Text("www.hdjc8.com").padding().background(Color.black).foregroundColor(.white)Text("Swift User Interface").font(.largeTitle).foregroundColor(.black).padding(15).background(Color.yellow).padding(15).background(Color.orange).padding(10).background(Color.red)}

第5节：Text-FullScreen：

Text("Hello World").frame(minWidth:0, maxWidth:.infinity, minHeight:0, maxHeight:.infinity).background(Color.orange).font(.largeTitle).edgesIgnoringSafeArea(.all)

第6节：Text-DateFormatter：

varnow=Date()staticletdateFormatter:DateFormatter={letformatter=DateFormatter()formatter.dateStyle=.longreturn formatter}()varbody:someView{Text("The time is:\(now, formatter:Self.dateFormatter)").font(.title).padding()}

第7节：Text-Append：

Text("Interactive").foregroundColor(.yellow).fontWeight(.heavy)+ Text("tutorials").foregroundColor(.orange).strikethrough()+ Text("for").foregroundColor(.red).italic()+ Text("SwiftUI").foregroundColor(.purple).underline()

第8节：TextField：

structContentView:View{@Statevarusername:String@Statevarnickname:Stringvarbody:someView{VStack{Text("Your username is\(username)!")Text("Your nickname is\(nickname)!")TextField("User Name", text: $username, onEditingChanged:{(value)inprint("onEditingChanged:\(self.username)")}){print("onCommit:\(self.username)")}.textFieldStyle(RoundedBorderTextFieldStyle())TextField("Nick Name", text: $nickname).textFieldStyle(RoundedBorderTextFieldStyle())}.padding()}}#if DEBUGstructContentView_Previews:PreviewProvider{staticvarpreviews:someView{ContentView(username:"", nickname:"")}}#endif

第9节：TextField-SecureField：

structContentView:View{@Statevarpassword:Stringvarbody:someView{VStack{Text("Your password is\(password)!")SecureField("Your password", text: $password){print("Your password is\(self.password)!")}.textFieldStyle(RoundedBorderTextFieldStyle())}.padding()}}

第10节：Button：

VStack{Button("First button"){print("---First button action.")}Button(action:{print("---Second button action.")}){Text("Second button")}Button(action:{print("---Third button action.")}){Image(systemName:"clock")Text("Third button")}.foregroundColor(Color.white).background(Color.orange)    //padding for button : the tap area is wrongButton(action:{print("---padding for button.")}){Text("Default padding")}.padding().background(Color.yellow)    //padding for label : the tap area is correct!Button(action:{print("---padding for label.")}){Text("Default padding").padding().background(Color.yellow)}Button(action:{print("---Button with image.")}){HStack{Image(systemName:"star")Text("Button with image")}.padding().background(Color.yellow)}Button(action:{print("---modifier button")}){Text("modifier button").modifier(MyButtonStyle())}}

第11节：Button-sheet：

structContentView:View{@StatevarisPresented=falsevarbody:someView{VStack{Button("Show modal"){self.isPresented=true}.sheet(isPresented: $isPresented, content:{MyDetailView(message:"Modal window")})}}}structMyDetailView:View{letmessage:Stringvarbody:someView{VStack{Text(message).font(.largeTitle)}}}

第12节：Spacer：

varbody:someView{VStack{HStack{Image(systemName:"clock")Spacer()}.padding()HStack{Image(systemName:"clock")Spacer()Text("\(Date())")}.padding()HStack{Image(systemName:"clock")Spacer(minLength:50)Text("\(Date())")}.padding()}}

第13节：Divider：

VStack{VStack{Image(systemName:"clock")Divider()Text("\(Date())")}.padding()VStack{Image(systemName:"clock")Divider().background(Color.purple).scaleEffect(CGSize(width:1, height:10))Text("\(Date())")}.padding()}

第14节：Image-Basic：

VStack{Image("girlPicture")Image(systemName:"arkit").foregroundColor(.orange).font(.system(size:48))Image("girlPicture").resizable().aspectRatio(contentMode:.fit)}.padding()

第15节：Image-Style：

ScrollView{VStack{Image("girlPicture").border(Color.orange)Image("girlPicture").border(Color.orange, width:10)Image("girlPicture").opacity(0.5)Image("girlPicture").shadow(radius:10)Image("girlPicture").shadow(color:.purple, radius:20, x:20, y:20)}}

第16节：Image-Processing：

ScrollView{VStack{Image("girlPicture")Image("girlPicture").blur(radius:CGFloat(2))Image("girlPicture").blur(radius:CGFloat(2), opaque:true)Image("girlPicture").brightness(0.2)Image("girlPicture").colorInvert()Image("girlPicture").colorMultiply(Color.yellow)Image("girlPicture").contrast(1.5)}VStack{Image("girlPicture").hueRotation(Angle.degrees(180))Image("girlPicture").saturation(10)Image("girlPicture").grayscale(5.5)Image("girlPicture").luminanceToAlpha()}}

第17节：Image-Blend：

VStack{Image("girlPicture").blendMode(.difference)ZStack{Image("texture")Image("girlPicture").blendMode(.multiply)}}.padding()

第18节：Image-Mask：

VStack{Image("girlPicture").clipShape(Circle())Image("girlPicture").mask(Circle())Image("texture").resizable().frame(width:300, height:300).mask(Text("SWIFT UI!").font(Font.system(size:64).bold()))}

第19节：Image-Transform：

ScrollView{VStack{Image("girlPicture").scaleEffect(0.8)Image("girlPicture").scaleEffect(CGSize(width:1.2, height:1))Image("girlPicture").scaleEffect(x:1.5, y:1, anchor:UnitPoint.bottomLeading)}VStack{Image("girlPicture").rotationEffect(Angle.init(degrees:90))Image("girlPicture").rotationEffect(Angle.init(degrees:30), anchor:UnitPoint.init(x:0, y:0))Image("girlPicture").rotation3DEffect(Angle.init(degrees:30), axis:(x:CGFloat(0.1), y:CGFloat(0.1), z:CGFloat(0)))}}

第20节：Image-Web：

structContentView:View{@StateprivatevarremoteImage:UIImage?=nilletplaceholderOne=UIImage(named:"Picture")varbody:someView{Image(uiImage:self.remoteImage?? placeholderOne!).onAppear(perform: fetchRemoteImage)}func fetchRemoteImage(){guardlet url=URL(string:"http://hdjc8.com/images/logo.png")else{return}URLSession.shared.dataTask(with: url){(data, response, error)iniflet image=UIImage(data: data!){self.remoteImage= image}else{print(error??"")}}.resume()}}

第21节：Picker：

structContentView:View{varfruits=["Apple","Banner","Pear","Watermelon"]varcolors=[Color.blue,Color.orange,Color.red,Color.purple]@StateprivatevarselectedItem=0varbody:someView{VStack{Picker(selection: $selectedItem, label:Text("Fruits")){ForEach(0..< fruits.count){Text(self.fruits[$0]).tag($0).foregroundColor(self.colors[$0])}}Text("Your choice:")+ Text("\(fruits[selectedItem])").foregroundColor(self.colors[selectedItem])}}}

第22节：PickerDate：

structContentView:View{varmyDateFormatter:DateFormatter{letformatter=DateFormatter()        formatter.dateStyle=.longreturn formatter}@StatevarselectedDate=Date()varbody:someView{VStack{DatePicker(selection: $selectedDate, displayedComponents:DatePickerComponents.hourAndMinute){Text("Date")}DatePicker(selection: $selectedDate, displayedComponents:DatePickerComponents.date){Text("Date")}DatePicker(selection: $selectedDate,in:Date()...Date().advanced(by:7*24*3600), displayedComponents:[.date,.hourAndMinute]){Text("Date")}Text("Your Choice:\(selectedDate, formatter: myDateFormatter)")}}}

第23节：Slider：

structContentView:View{@Statevartemperature:Double=0varbody:someView{VStack{Slider(value: $temperature)Slider(value: $temperature, in:-20...40)Slider(value: $temperature, in:-20...40){(item)inprint(item)}HStack{Image(systemName:"sun.max")Slider(value: $temperature, in:-20...40, step:2){(item)inprint(item)}.accentColor(.pink).colorInvert()Image(systemName:"sun.max.fill")}.padding()Text("The temperature is\(Int(temperature)).")}}}

第24节：Stepper：

structContentView:View{@Statevartemperature:Double=0varbody:someView{VStack{Stepper(onIncrement:{self.temperature+=1}, onDecrement:{self.temperature-=1}, label:{Text("Temperature:\(Int(temperature))")})Stepper(onIncrement:{self.temperature+=1}, onDecrement:{self.temperature-=1}, onEditingChanged:{(item)inprint(item)}, label:{Text("Temperature:\(Int(temperature))")})}.padding()}}

第25节：Segment：

structContentView:View{privatevaranimals=["🐶 Dog","🐯 Tiger","🐷 Pig"]varcolors=[Color.yellow,Color.orange,Color.red,Color.purple]@StateprivatevarselectedAnimal=0varbody:someView{VStack{Picker(selection: $selectedAnimal, label:Text("animals")){ForEach(0..< animals.count){Text(self.animals[$0]).tag($0)}}.pickerStyle(SegmentedPickerStyle())Text("Your choice:\(animals[selectedAnimal])")}}}

第26节：Toggle：

structContentView:View{@StatevarshowNotification=truevarbody:someView{VStack{Text("Show Notification:")+ Text("\(self.showNotification.description)").foregroundColor(.green).bold()Toggle(isOn: $showNotification){Text("Show notification:")}.padding()}}}

第27节：TabView：

varbody:someView{TabView{Text("The home page.").font(.system(size:36)).tabItem({Image(systemName:"house")Text("Home")}).tag(0)Text("The settings page").font(.system(size:36)).tabItem({Image(systemName:"gear")Text("Settings")}).tag(1)}}

第28节：使用UIKit中的Webview：

import SwiftUIimport WebKitstructContentView:UIViewRepresentable{func makeUIView(context:UIViewRepresentableContext<ContentView>)->WKWebView{returnWKWebView()}func updateUIView(_ uiView:WKWebView, context:UIViewRepresentableContext<ContentView>){letrequest=URLRequest(url:URL(string:"https://apple.com")!)        uiView.load(request)}}

第29节：MapView：

import SwiftUIimport MapKitstructContentView:UIViewRepresentable{func makeUIView(context:UIViewRepresentableContext<ContentView>)->MKMapView{returnMKMapView()}func updateUIView(_ uiView:MKMapView, context:UIViewRepresentableContext<ContentView>){        uiView.showsUserLocation=true        uiView.mapType=MKMapType.satelliteletcoordinate2D=CLLocationCoordinate2D(latitude:39.915352, longitude:116.397105)letzoomLevel=0.02letregion=MKCoordinateRegion(center: coordinate2D, span:MKCoordinateSpan(latitudeDelta: zoomLevel, longitudeDelta: zoomLevel))        uiView.setRegion(uiView.regionThatFits(region), animated:true)}}

第30节：Shape-Circle：

VStack{Circle()Circle().fill(Color.orange).frame(width:200, height:200)ZStack{Circle().fill(Color.purple)Circle().fill(Color.yellow).scaleEffect(0.8)Circle().fill(Color.orange).scaleEffect(0.6)}Rectangle()Rectangle().fill(Color.orange).frame(width:200, height:200)ZStack{Rectangle().fill(Color.purple).frame(width:300, height:200)Rectangle().fill(Color.yellow).frame(width:300, height:200).scaleEffect(0.8)Rectangle().fill(Color.orange).frame(width:300, height:200).scaleEffect(0.6)}}

第31节：Shape-Rectangle：

VStack{Rectangle()Rectangle().fill(Color.orange).frame(width:200, height:200)ZStack{Rectangle().fill(Color.purple).frame(width:300, height:200)Rectangle().fill(Color.yellow).frame(width:300, height:200).scaleEffect(0.8)Rectangle().fill(Color.orange).frame(width:300, height:200).scaleEffect(0.6)}RoundedRectangle(cornerRadius:120)RoundedRectangle(cornerSize:CGSize(width:100, height:40)).frame(width:300, height:200)RoundedRectangle(cornerRadius:100, style:RoundedCornerStyle.continuous)}

第32节：32Shape-Path：

Path{ pathin   path.move(to:CGPoint(x:30, y:0))   path.addLine(to:CGPoint(x:30, y:200))   path.addLine(to:CGPoint(x:230, y:200))    path.addLine(to:CGPoint(x:230, y:0))}Path{ pathin    path.addEllipse(in:CGRect(x:100, y:30, width:200, height:200))    path.addRoundedRect(in:CGRect(x:100, y:120, width:200, height:200), cornerSize:CGSize(width:10, height:10))    path.addEllipse(in:CGRect(x:100, y:210, width:200, height:200))}

第33节：LinearGradien：

Text("SwifUI Gradient").font(.system(size:36)).padding().foregroundColor(.white).background(LinearGradient(gradient:Gradient(colors:[.orange,.red,.purple]), startPoint:.topLeading, endPoint:.bottomTrailing))}

第34节：AngularGradient：

VStack{Text("SwifUI Gradient").font(.system(size:36)).padding().foregroundColor(.white).background(AngularGradient(gradient:Gradient(colors:[.orange,.red,.purple]), center:UnitPoint(x:0.5, y:0.5), angle:Angle.init(degrees:-45)))Text("SwifUI Gradient").font(.system(size:36)).padding().foregroundColor(.white).background(AngularGradient(gradient:Gradient(colors:[.orange,.red,.purple]), center:UnitPoint(x:0.5, y:0.5), startAngle:Angle.init(degrees:0), endAngle:Angle.init(degrees:0)))}

第35节：RadialGradient：

Text("SwifUI Gradient").font(.system(size:36)).padding().foregroundColor(.white).background(RadialGradient(gradient:Gradient(colors:[.orange,.red,.purple]), center:.init(x:0.5, y:0.5), startRadius:CGFloat(10), endRadius:CGFloat(120)))}

第二章 动画Animation

第1节：scaleEffect+default

structContentView:View{@Statevarfactor:CGFloat=1varbody:someView{VStack{Image("logo").scaleEffect(factor)//设置Image的缩放比例为factor.animation(.default)//给Image添加default类型的动画效果Divider().fixedSize()Button(action:{self.factor+=0.2//当按钮点击时增加Image的缩放比例}){Text("Zoom in")}}}}

第2节：Opacity+linear

structContentView:View{@Statevarfactor:Double=1@Statevaralpha:Double=1varbody:someView{Image("logo").scaleEffect(CGFloat(factor)).opacity(alpha).onTapGesture{withAnimation(.linear(duration:1.0)){self.factor+=0.1self.alpha-=0.2}}}}

第3节：Offset+easeOut

structContentView:View{@Statevardistance:Double=0varbody:someView{VStack{Image("logo").offset(x:0, y:CGFloat(distance)).animation(.easeOut(duration:2))Divider().fixedSize()Button(action:{self.distance-=120}){Text("Move Effect")}}}}

第4节：RotationEffect+spring

structContentView:View{@Statevarangle:Double=0varbody:someView{VStack{Image("logo").rotationEffect(Angle.init(degrees: angle)).animation(.spring())Divider().fixedSize()Button(action:{self.angle+=90}){Text("Rotation Effect")}}}}

第5节：CombinedAnimation

structContentView:View{@Statevarradius:Double=0@Statevarbrightness:Double=0varbody:someView{VStack{Image("logo").shadow(radius:CGFloat(radius)).brightness(brightness).animation(.linear(duration:2))Divider().fixedSize()Button(action:{self.radius+=10self.brightness=1}){Text("Move Effect")}}}}

第6节：SpeadAndDelay

structContentView:View{@Statevarfactor:Double=1.0varanimation:Animation{Animation.linear(duration:1)//            .speed(1)//            .speed(5).delay(2)}varbody:someView{VStack{Image("logo").scaleEffect(CGFloat(factor)).animation(animation)Divider().fixedSize()Button(action:{self.factor+=0.2}){Text("Zoom In Effect")}}}}

第7节：Repeating

structContentView:View{@Statevarangle:Double=0varanimation:Animation{Animation.spring().repeatForever()//            .repeatForever(autoreverses: false)//            .repeatCount(3)}varbody:someView{VStack{Image("logo").rotationEffect(Angle.init(degrees: angle)).animation(animation)Divider().fixedSize()Button(action:{self.angle+=45}){Text("Repeat Forever Effect")}}}}

第8节：ToggleVisibility

structContentView:View{@StatevarshowingPassword=false@Statevarpassword=""varbody:someView{VStack{Toggle(isOn: $showingPassword.animation(.spring())){Text("Toggle Password")}if showingPassword{TextField("Password", text: $password).padding().border(Color.green, width:1)}}.padding()}}

第9节：AsymmetricTransition

structContentView:View{@StatevarshowPicture=falsevarbody:someView{VStack{Button(action:{withAnimation{self.showPicture.toggle()}}){Text("Show picture")}if showPicture{//                Image("logo")                //                Image("logo")//                    .transition(.move(edge: .top))                //                Image("logo")//                    .transition(.scale(scale: 0))                //                Image("logo")//                    .transition(.slide)                //                Image("logo")//                    .transition(.asymmetric(insertion: .scale(scale: 0), removal: .slide))Image("logo").transition(AnyTransition.scale(scale:0).combined(with:.slide))}}}}

第三章 手势Gesture

第1节：TapGesture+Single tap

structContentView:View{@StatevarisPressed=falsevarbody:someView{lettapGesture=TapGesture().onEnded{ _inself.isPressed.toggle()}returnCircle().fill(Color.orange).frame(width:240, height:240).gesture(tapGesture).scaleEffect(isPressed?1.4:1).animation(.default)}}

第2节：TapGesture+Double tap

structContentView:View{@StatevarisPressed=falsevarbody:someView{returnCircle().fill(Color.orange).frame(width:240, height:240).scaleEffect(isPressed?1.4:1).animation(.default).onTapGesture(count:2){self.isPressed.toggle()print("Double tap.")}}}

第3节：LongPressGesture

structContentView:View{@GestureStatevarisLongPressed=falsevarbody:someView{letlongPressGesture=LongPressGesture().updating($isLongPressed){ value, state, transcationinprint(value, state, transcation)                state= value}.onEnded{(value)inprint(value)}returnCircle().fill(Color.orange).frame(width:240, height:240).gesture(longPressGesture).scaleEffect(isLongPressed?1.4:1).animation(.default)}}

第4节：RotationGesture

structContentView:View{@Statevarangle=0.0varbody:someView{letrotationGesture=RotationGesture(minimumAngleDelta:Angle.init(degrees:20)).onChanged({(angle)inself.angle+= angle.animatableData}).onEnded{(angle)inprint(self.angle)}returnImage("logo").gesture(rotationGesture).rotationEffect(Angle.init(degrees:self.angle))}}

第5节：DragGesture

structContentView:View{@Statevaroffset:CGSize=.zerovarbody:someView{letdragGesture=DragGesture().onChanged{(value)inprint(value.startLocation, value.location, value.translation)self.offset= value.translation}.onEnded{(value)inif(abs(value.translation.width)>=40 ||abs(value.translation.height-(-260))>=40){self.offset=.zero}else{self.offset=CGSize(width:0, height:-260)}}returnVStack{Circle().fill(Color.black).opacity(0.1).frame(width:200, height:200).offset(CGSize(width:0, height:-50))Circle().fill(Color.orange).frame(width:200, height:200).offset(offset).gesture(dragGesture).animation(.spring())}}}

第6节：LongPressGestureAndDragGesture

structContentView:View{@Statevaroffset:CGSize=.zero@GestureStatevarisLongPressed=falsevarbody:someView{letlongPressGesture=LongPressGesture().updating($isLongPressed){ value, state, transcationinprint(value, state, transcation)                state= value}.onEnded{(value)inprint(value)}letdragGesture=DragGesture().onChanged{(value)inprint(value.startLocation, value.location, value.translation)self.offset= value.translation}.onEnded{(value)inif(abs(value.translation.width)>=40 ||abs(value.translation.height-(-260))>=40){self.offset=.zero}else{self.offset=CGSize(width:0, height:-260)}}.simultaneously(with: longPressGesture)returnVStack{Circle().fill(Color.black).opacity(0.1).frame(width:200, height:200).offset(CGSize(width:0, height:-50))Circle().fill(Color.orange).frame(width:200, height:200).offset(offset).gesture(dragGesture).scaleEffect(isLongPressed?1.4:1).animation(.spring())}}}

第四章 布局Layout

第1节：Group

structContentView:View{varbody:someView{Group{Text("Apple")Text("Banana")Text("Orange")Text("Watermelon")Text("Grape")Text("Papaya")Text("Pear")}.font(.title).foregroundColor(.orange).padding()}}

第2节：HSTack

structContentView:View{varbody:someView{HStack(alignment:.bottom, spacing:40){Image(systemName:"book.fill")Text("Interactive Tutorials")Spacer()Image(systemName:"icloud.and.arrow.down")}.padding()}}

第3节：VSTack

structContentView:View{varbody:someView{VStack{Text("The fruit and the tree").font(.largeTitle)Image("Apple")Text("An apple is a sweet, edible fruit produced by an apple tree Apple trees are cultivated worldwide and are the most widely grown species in the genus Malus.").font(.body).lineLimit(nil).frame(height:200)}.padding()}}

第4节：ZSTack

structContentView:View{varbody:someView{ZStack(alignment:.center){Image("beach").clipShape(Circle())Text("Sea beach").font(.system(size:48)).foregroundColor(.white)Text("Hawaii - USA").font(.system(size:14)).foregroundColor(.white).offset(x:0, y:36)}.padding(10)}}

第5节：List-Basic

structContentView:View{@Statevarlanguages=["Objective-C","Swift","Flutter"]varbody:someView{List{Text("Objective-C")Text("Swift")Text("Flutter")}                //                List(0..<5) { item in//                    Text("Item : \(item)")//                }                //                ForEach(languages, id: \.self) { language in//                    Text(language)//                }}}

第6节：List-Insert

structContentView:View{@Statevarlanguages=["Objective-C","Swift","Flutter"]varbody:someView{NavigationView{List{ForEach(languages, id:\.self){ languageinText(language)}.onInsert(of:["demo"], perform:{(offset, message)inprint(offset)})}.navigationBarTitle(Text("Edit Row"), displayMode:.large).navigationBarItems(trailing:EditButton())}.padding()}func insertItem(to offsets:Int, message:[NSItemProvider]){        languages.insert(message[0].description, at: offsets)}}

第7节：List-Delete

structContentView:View{@Statevarlanguages=["Objective-C","Swift","Flutter"]varbody:someView{NavigationView{List{ForEach(languages,id: \.self){ languageinText(language)}.onDelete(perform: delete)}.navigationBarItems(trailing:EditButton())}}func delete(at offsets:IndexSet){iflet first= offsets.first{                languages.remove(at: first)}}}

第8节：List-Move

structContentView:View{@Statevarlanguages=["Objective-C","Swift","Flutter"]varbody:someView{NavigationView{List{ForEach(languages,id: \.self){ languageinText(language)}.onMove{(source, destination)inself.languages.move(fromOffsets: source, toOffset: destination)}}.navigationBarTitle(Text("Edit Row"), displayMode:.large).navigationBarItems(trailing:EditButton())}}func moveItem(from source:IndexSet, to destination:Int){        languages.move(fromOffsets: source, toOffset: destination)print(languages)}}

第9节：List-DeleteAndMove

structContentView:View{@Statevarlanguages=["Objective-C","Swift","Flutter"]varbody:someView{NavigationView{List{ForEach(languages, id: \.self){ languageinText(language)}.onDelete(perform: deleteItem).onMove(perform: moveItem)}.navigationBarTitle(Text("Edit Row"), displayMode:.large).navigationBarItems(trailing:EditButton())}}func deleteItem(at offsets:IndexSet){iflet first= offsets.first{            languages.remove(at: first)}}func moveItem(from source:IndexSet, to destination:Int){        languages.move(fromOffsets: source, toOffset: destination)}}

第10节：ScrollView-Vertical

structContentView:View{@Statevarlanguages=["Objective-C","Swift","Flutter"]varbody:someView{ScrollView(.vertical, showsIndicators:false){VStack(alignment:HorizontalAlignment.leading, spacing:20){Text("Overview").font(.system(size:48)).padding(10)Text("With the power of Xcode, the ease of Swift, and the revolutionary features of cutting-edge Apple technologies, you have the freedom to create your most innovative apps ever.\nSwiftUI provides views, controls, and layout structures for declaring your app's user interface. The framework provides event handlers for delivering taps, gestures, and other types of input to your app, and tools to manage the flow of data from your app's models down to the views and controls that users will see and interact with.").lineLimit(nil).frame(width:300, height:240, alignment:.topLeading).padding(10)Image("iPhone").resizable().frame(width:300, height:556, alignment:.center)}}.background(Color.orange).padding(10).navigationBarTitle(Text("ScrollView"))}}

第11节：ScrollView-Horizontal

structContentView:View{@Statevarlanguages=["Objective-C","Swift","Flutter"]varbody:someView{ScrollView(.horizontal, showsIndicators:true){HStack(alignment:.center, spacing:20){Image("iPhone").resizable().frame(width:300, height:556, alignment:.center)Image("iPhoneSerial").resizable().frame(width:823, height:556, alignment:.center)Image("iPhone").resizable().frame(width:300, height:556, alignment:.center)}}.background(Color.orange).padding(10)}}

第12节：ScrollView-VerticalAndHorizontal

structContentView:View{@Statevarlanguages=["Objective-C","Swift","Flutter"]varbody:someView{ScrollView(.vertical, showsIndicators:false){VStack(alignment:HorizontalAlignment.leading, spacing:20){Text("Overview").font(.system(size:48)).padding(10)Text("With the power of Xcode, the ease of Swift, and the revolutionary features of cutting-edge Apple technologies, you have the freedom to create your most innovative apps ever.\nSwiftUI provides views, controls, and layout structures for declaring your app's user interface. The framework provides event handlers for delivering taps, gestures, and other types of input to your app, and tools to manage the flow of data from your app's models down to the views and controls that users will see and interact with.").lineLimit(nil).frame(width:300, height:350, alignment:.topLeading).padding(10)ScrollView(.horizontal, showsIndicators:true){HStack(alignment:.center, spacing:20){Image("iPhone").resizable().frame(width:189, height:350, alignment:.center)Image("iPhoneSerial").resizable().frame(width:518, height:350, alignment:.center)Image("iPhone").resizable().frame(width:189, height:350, alignment:.center)}}.background(Color.orange).padding(10)}}.background(Color.orange).padding(10).navigationBarTitle(Text("ScrollView"))}}

第13节：Form-Basic

structContentView:View{privatevarlanguages=["Swift","Objective-C"]@StateprivatevarselectedLanguage=0@StatevarworkingYear:Double=2@StatevarenableNotification=falsevarbody:someView{NavigationView{Form{Picker(selection: $selectedLanguage, label:Text("Languages")){ForEach(0..< languages.count){Text(self.languages[$0]).tag($0)}}.pickerStyle(SegmentedPickerStyle())HStack{Text("Working years")Slider(value: $workingYear, in:1...10, step:1)}Toggle(isOn: $enableNotification){Text("Enable Notification")}Button(action:{print("Your programming language:\(self.languages[self.selectedLanguage])")print("Your working years:\(Int(self.workingYear))")print("Enable notification:\(self.enableNotification)")}){Text("Submit")}}.navigationBarTitle(Text("Profiles"))}}}