SwiftUI Tutorials（1）：创建和结合视图

文章目录

• • @[toc]

最近在学习 SwiftUI，感觉官网上的教程非常好。于是决定先把官网上的教程学习完，然后再去查找其他的教程来学习。

这个系列的目的不是为了翻译官网上的教程，也不是为了教学什么的。

我的目的呢是整理出官网上教程的一些小知识点，方便查阅。

这样以后想不起来的时候就可以快速定位了。

---

官方地址：https://developer.apple.com/tutorials/swiftui/tutorials

---

0. 操控控件 —— Command + click

1. 文本 —— Text

Text("文本信息")
	.font(.title)   						//标题    //.font(.subheadline) 副标题
	.foregroundColor(.black)		//颜色

2. 图片 —— Image

• clipShape —— 裁剪图片形状
• overlay —— 外框
• shadow —— 阴影

Iamge("图片名称")  					//图片需要先加载到 Assets.xcassets 文件夹中
	.clipShape(Circle())		 //裁剪图片形状，示例中是圆形
	//外框, stroke是画笔，linewidth是框宽
	.overlay(Circle().stroke(Color.white, linewidth=4))	
	.shadow(radius: 10)      //阴影，radius 是指定阴影半径

3. 垂直栈 —— VStack，水平栈 —— HStack

• alignment —— 对齐方式
• padding —— 与上下左右的间隔
• frame(width,height) —— 栈大小

VStack(alignment: .leading){  //左对齐
	/**
  里面放各种控件，按垂直堆放
	*/
}
.padding()   //与四周隔开点空格
.frame(width:10,height:10)   //栈大小

4. 空隙 —— Spacer()

Spacer()   /**
						用于将两个组件隔开。
						如果放在最上面，则可以把下面的组件都压到底
						如果放在最下面，则可以把上面的组件都压到顶
						*/

5. 地图 —— MapView

import SwiftUI
import MapKit  //需要导入 MapKit 包

/**
UIViewRepresentbale 官方解释是：A view that represents a UIKit view.
所以 MapView 其实是 UIKit 框架中的东西。
这里是 UIKit 和 SwiftUI 的结合。
 */
struct MapView: UIViewRepresentable {
  /**
  UIViewRepresentbale 有两个方法必须要增加
        1. makeUIView：创建 MKMapView
        2. updateUIView：配置 view 和对 changes 进行相应
  */
  func makeUIView(context: UIViewRepresentableContext<MapView>) -> MKMapView {
        MKMapView(frame: .zero)
    }
  
  func updateUIView(_ uiView: MKMapView, context: UIViewRepresentableContext<MapView>) {
        //经纬度
        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)
    }
}

6. 结合视图 —— 结构体名称()

在视图1中引用视图2，其实这个时候视图2就是视图1中的一个“控件”了。

• offset —— 平移视图
• edgesIgnoringSafeArea —— 无视安全区域
• frame —— 视图大小
• padding —— 与其他控件的距离

---

PS：源码和素材都可以在官网上下载。如果有什么错误的地方，敬请批评指正~ 感激不尽！

Over~