SwiftUI 牛刀小试

SwiftUI 牛刀小试

通过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()
      }
  }