SwiftUI 牛刀小试 - ShenYj/ShenYj.github.io GitHub Wiki
通过SwiftUI实现如上界面,代码分为三个部分:
-
圆角图片
import SwiftUI struct CircleImage: View { var body: some View { Image("ymy") .frame(width: 150.0, height: 150.0) .clipShape(Circle()) .overlay(Circle().stroke(Color.white, lineWidth: 4)).shadow(radius: 10) } } struct CircleImage_Previews: PreviewProvider { static var previews: some View { CircleImage() } }
-
地图
import SwiftUI import MapKit struct MapView: UIViewRepresentable { func makeUIView(context: Context) -> MKMapView { return MKMapView(frame: .zero) } func updateUIView(_ uiView: MKMapView, context: Context) { let location = CLLocationCoordinate2D(latitude: 40.00491139888854, longitude: 116.2896180152893) let span = MKCoordinateSpan(latitudeDelta: 0.5, longitudeDelta: 0.5) let region = MKCoordinateRegion(center: location, span: span) uiView.setRegion(region, animated: true) } } struct MapView_Previews: PreviewProvider { static var previews: some View { MapView() } }
-
底部文本, 最后在ContentView中进行组合
import SwiftUI struct ContentView: View { var body: some View { VStack { // 地图组件 MapView() .edgesIgnoringSafeArea(.all) .frame(height: 300) // 圆角图片 CircleImage() .offset(y: -80) .padding(.bottom, -80) // 底部介绍 VStack(alignment: .leading) { Text("圆明园") .font(.title) .foregroundColor(Color.red) HStack { Text("皇家园林").font(.subheadline).foregroundColor(.black) Spacer() Text("北京").font(.subheadline) } }.padding() // 占位, 配合.edgesIgnoringSafeArea(.all), 让地图置顶无安全区域的间隔 Spacer() } } } struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } }