SwiftUI-基础使用-1

参考：SwiftUI 教程

基础用法

Text

Customize the Text View 自定义TextView VCtack:竖向布局 HStack:横向布局 Spacer：空白

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

Image

Create a Custom Image View 图片 clipShape 切割方式

var body: some View { VStack { Image("timg-2") Text("上图：原图") Spacer() Text("下图：圆形切割") Image("timg-2") .clipShape(Circle()) .overlay(Circle().stroke(Color.white, lineWidth: 8)) .shadow(radius: 20) } .padding(.vertical, 90.0) }

Use UIKit and SwiftUI Views Together 将UIKit与SwiftUI结合使用

UIViewRepresentable

UIKit视图的容器，用这个将视图装起来集成到SwiftUI视图中去。

A wrapper for a UIKit view that you use to integrate that view into your SwiftUI view hierarchy.

UIViewRepresentable 需要实现两个方法：makeUIView(context:) 和 updateUIView(_:context:)

The UIViewRepresentable protocol has two requirements you need to add: a makeUIView(context:) method that creates an MKMapView, and an updateUIView(_:context:) method that configures the view and responds to any changes.

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

Compose the Detail View 将独立的SwiftUI组合在一起

Spacer

A flexible space that expands along the major axis of its containing stack layout, or on both axes if not contained in a stack. 一种可伸缩的空间，它沿其包含的堆栈布局的主轴展开，如果不包含在堆栈中，则在两个轴上展开。 大致意思应该是按空间（横向或者纵向）展开，如果放在底（左）部，在将视图向上（右）顶，放在顶（右）部，则将视图向下（左）顶，如果放在两个的中间，则向两边顶。

edgesIgnoringSafeArea

Changes the view’s proposed area to extend outside the screen’s safe areas. 从顶部安全区域（状态栏）开始

在主ContentView.swift文件中，将想要拼接在一起的视图按需要的位置组装起来。

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