系统: Mac OS 10.15.1， XCode 11.2.1，swift 5.0
写作时间：2019-11-29

说明

此例子包含元素：纵向组合容器VStack, 横向组合容器HStack，UIImage，Map。这个项目的表达的意思是，地图给出一个经纬度地标，显示图文介绍。
细节请查看官网教程
在这里插入图片描述

创建工程

工程名字：CreatingAndCombiningViews
User Interface: SwiftUI
在这里插入图片描述
预览如下(快捷键：Command + Option + p)：

加上组合View

目标是把文字改为如下：
VStack：纵向分为两派
HStack：横向分为两列，中间有空格Spacer
在这里插入图片描述
ContentView.swift 修改struct ContentView如下：

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Turtle Rock")
                .font(.title)
            HStack {
                Text("Joshua Tree National Park")
                    .font(.subheadline)
                Spacer()
                Text("California")
                    .font(.subheadline)
            }
        }
        .padding()
        
            
    }
}

预览效果：
在这里插入图片描述

定制一个圆形Image

定制效果图分解如下：
在这里插入图片描述
添加图片到资源文件Assets.xcassets

新建SwiftUI View, 名字为CircleImage.swift
在这里插入图片描述
代码实现如下

struct CircleImage: View {
    var body: some View {
        Image("turtlerock")
            .clipShape(Circle())
            .overlay(Circle().stroke(Color.white, lineWidth: 4)
                .shadow(radius: 10))
    }
}

解析：

clipShape：剪切为圆形
overlay：覆盖了一层
Circle().stroke: 白色圆形边框
shadow：加阴影

预览效果：
在这里插入图片描述

创建MKMapView

达到的效果为，定位到地图的某个经纬度
在这里插入图片描述
创建一个SwiftUIView, 名字为MapView.swift

import SwiftUI
import MapKit

struct MapView: UIViewRepresentable {
    
    func makeUIView(context: Context) -> MKMapView {
        MKMapView(frame: .zero)
    }
    
    func updateUIView(_ view: MKMapView, context: Context) {
        let coordinate = CLLocationCoordinate2D(latitude: 34.011286, longitude: -116.166868)
        let span = MKCoordinateSpan(latitudeDelta: 2.0, longitudeDelta: 2.0)
        let region = MKCoordinateRegion(center: coordinate, span: span)
        view.setRegion(region, animated: true)
    }
}

解析：
这里需要引入import MapKit，遵循协议UIViewRepresentable，实现两个必须实现的delegate方法

扫描二维码关注公众号，回复： 8574342 查看本文章

makeUIView(context:) 表示创建MKMapView
updateUIView(_:context:) 表示配置MapView的经纬度，显示大小，还有对地图改变的更新.

需要点击live 预览才能看到地图
在这里插入图片描述

组合圆形Image和MapView

切换为ContentView, 修改如下：

struct ContentView: View {
    var body: some View {
        VStack {
            MapView()
            .edgesIgnoringSafeArea(.top)
            .frame(height: 300)
            
            CircleImage()
                .offset(y: -130).padding(.bottom, -130)
            
            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.title)
                HStack {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
            }
            .padding()
        
            Spacer()
        }
    }
}

解析：

增加MapView()，直接顶到刘海上面去.edgesIgnoringSafeArea(.top)，设置高度为.frame(height: 300)
增加CircleImage()并设置网上偏移.offset(y: -130), 让紧接下面的文字视图也网上偏移.padding(.bottom, -130)
最下面增加空白Spacer()，使得地图、圆形Image、文字紧凑在一起。

Live 预览如下：
在这里插入图片描述