参考: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()
}
}