010_swiftui_复杂布局_swfit circle()

用到的资源

效果展示

在使用swift_UI中有一些快捷操作

操作1 代码中快速新增布局

移动选中控件后 按住command键

然后弹出操作菜单 可以选中包裹布局让在外面快速添加一层布局

操作2 布局中快速新增代码

在ui中选中控件。按住command键，然后双击键盘左键就可以打开快速操作面板。也能在下面选中

Embed in HStack.或者VStack 在外层迅速包裹布局

也可以选中Show SwiftUi Inspector 来打开快捷操作面板

在这里进行图形化界面的操作。

修改文本，或者新增字体或者颜色或者居中方式

然后会自动生成代码到左边的代码区域

当然 你也可以使用操作3 最原生朴素的方法去添加一个Text或者HStack

点击+号后，然后选中控件 然后使用搜索。。搜到了以后拖拽到代码区域

 用哪个方式都行。。

好了下面进入代码环节。

因为前面基础部分讲了很多。所以就不重复讲了。精品博客就是这么任性

本代码算上ContentView.swift共使用了三个swfitUi文件 

第一个

CircleImage.swift

//
//  CircleImage.swift
//  learnUi3
//
//  Created by liuan on 2020/4/4.
//  Copyright © 2020 liuan. All rights reserved.
//
 
import SwiftUI
 
struct CircleImage: View {
    var body: some View {
        Image("150")
    .clipShape(Circle())
        .overlay(Circle().stroke(Color.white,lineWidth: 2))
        .shadow(radius: 10)
        
       
    }
}
 
struct CircleImage_Previews: PreviewProvider {
    static var previews: some View {
        CircleImage()
    }
}

第二个比较复杂，不要求掌握内容。知道大概就好 因为牵扯使用到了MapKit库，目前我们对他还是一无所知。重要的是学习布局。所以请忽略这个细节把

//
//  MapView.swift
//  learnUi3
//
//  Created by liuan on 2020/4/4.
//  Copyright © 2020 liuan. All rights reserved.
//
 
import SwiftUI
import MapKit
 
struct MapView: UIViewRepresentable {
    func makeUIView(context: UIViewRepresentableContext<MapView>) -> MKMapView {
        MKMapView()
    }
    
    func updateUIView(_ uiView: MKMapView, context: UIViewRepresentableContext<MapView>) {
        //put the code to update the uikit view
        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)
        uiView.setRegion(region, animated: true)
    }
 
}
 
struct MapView_Previews: PreviewProvider {
    static var previews: some View {
        MapView()
    }
}

第三个就是核心了

//
//  ContentView.swift
//  learnUi3
//
//  Created by liuan on 2020/4/1.
//  Copyright © 2020 liuan. All rights reserved.    ·
//
 
import SwiftUI
 
struct ContentView: View {
    var body: some View {
        VStack {
            MapView()
                .frame(height: 300)
                .edgesIgnoringSafeArea(.top)
            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()
        }
    }
}
 
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

在编写地图的时候写上经纬度后可以实时预览、前提是点击上面的播放按钮