SwiftUI 牛刀小试

效果图

代码分为三个部分:

1. 圆角图片:

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

2. 地图

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

3. 底部文本

最后在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()
    }
}