swiftuiview的位置（零基础Ios开发-SwiftUI-）

苹果的API真的好方便简洁，和系统一样好用，只需要一天就可以上手了。

把我的学习经历分享给大家。

一共四个文件，下面我会一一贴上4个文件的代码。

1:LandmarksApp.swift

程序的总入口，main函数。

import SwiftUI @main struct LandmarksApp: App { var body: some Scene { WindowGroup { ContentView() } } }

2:ContentView.swift

布局文件，视图内容主要代码。

关于布局，重点了解下VStack 和 HStack

import SwiftUI struct ContentView: View { var body: some View { VStack { // 垂直布局 MapView() // 引入地图 .ignoresSafeArea(edges: .top) .frame(height: 300) // 引入原型图片 CircleImage() .offset(y: -100) .padding(.bottom, -100) // 引入水平布局 VStack(alignment: .leading) { Text("Turtle Rock") .font(.largeTitle) .foregroundColor(.blue) // 嵌套垂直布局 HStack { Text("Joshua Tree National Park") Spacer() // 空白 Text("California") } .font(.subheadline) .foregroundColor(.secondary) Divider() // 水平直线 Text("About Turtle Rock") .font(.title2) Text("Descriptive text goes here.") } .padding() Spacer() // 空白 } } } struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } }

3:ContentView.swift

圆形的图片效果代码

import SwiftUI struct CircleImage: View { var body: some View { Image("turtlerock") .clipShape(/*@START_MENU_TOKEN@*/Circle()/*@END_MENU_TOKEN@*/) .overlay { Circle().stroke(.white, lineWidth: 4) } .shadow(radius: 7) } } struct CircleImage_Previews: PreviewProvider { static var previews: some View { CircleImage() } }

4:MapView.swift

地图引入方法

预览效果：

import SwiftUI import MapKit struct MapView: View { @State private var region = MKCoordinateRegion( center: CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868), span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2) ) var body: some View { Map(coordinateRegion: $region) } } struct MapView_Previews: PreviewProvider { static var previews: some View { MapView() } }

最终运行效果：

如果需要整个工程，可以私我。