零基础Ios开发水平布局,垂直布局
苹果的API真的好方便简洁,和系统一样好用,只需要一天就可以上手了。
把我的学习经历分享给大家。先看效果
实现方法1。创建工程
2。代码编写
一共四个文件,下面我会一一贴上4个文件的代码。
1:LandmarksApp。swift
程序的总入口,main函数。importSwiftUImainstructLandmarksApp:App{varbody:someScene{WindowGroup{ContentView()}}}
2:ContentView。swift
布局文件,视图内容主要代码。
关于布局,重点了解下VStack和HStack
importSwiftUIstructContentView:View{varbody:someView{VStack{垂直布局MapView()引入地图。ignoresSafeArea(edges:。top)。frame(height:300)引入原型图片CircleImage()。offset(y:100)。padding(。bottom,100)引入水平布局VStack(alignment:。leading){Text(TurtleRock)。font(。largeTitle)。foregroundColor(。blue)嵌套垂直布局HStack{Text(JoshuaTreeNationalPark)Spacer()空白Text(California)}。font(。subheadline)。foregroundColor(。secondary)Divider()水平直线Text(AboutTurtleRock)。font(。title2)Text(Descriptivetextgoeshere。)}。padding()Spacer()空白}}}structContentViewPreviews:PreviewProvider{staticvarpreviews:someView{ContentView()}}
3:ContentView。swift
圆形的图片效果代码
importSwiftUIstructCircleImage:View{varbody:someView{Image(turtlerock)。clipShape(STARTMENUTOKENCircle()ENDMENUTOKEN)。overlay{Circle()。stroke(。white,lineWidth:4)}。shadow(radius:7)}}structCircleImagePreviews:PreviewProvider{staticvarpreviews:someView{CircleImage()}}
4:MapView。swift
地图引入方法
预览效果:importSwiftUIimportMapKitstructMapView:View{StateprivatevarregionMKCoordinateRegion(center:CLLocationCoordinate2D(latitude:34。011286,longitude:116。166868),span:MKCoordinateSpan(latitudeDelta:0。2,longitudeDelta:0。2))varbody:someView{Map(coordinateRegion:region)}}structMapViewPreviews:PreviewProvider{staticvarpreviews:someView{MapView()}}
最终运行效果:
如果需要整个工程,可以私我。