前言
从本篇文章开始，我们来学习SwiftUI中常用的Views和Modifies。首先我们需要使用起来，以后有机会再看看比较深层次的知识点。
一、与OC文件的比较
在学习之前，我们来比较一下SwiftUI文件和OC文件所对应的控件添加区块的不同，新建项目，默认Interface选择SwiftUI,Language选择Swift，并且新增一个OC文件，查看之间不一样的地方：
可见，在SwiftUI里面，多了
Views（普通视图）和Modifies（修饰视图），左侧列表中包括我们常用的所有视图及容器控件，单击左边列表，右边展示的是介绍及用法，所以一开始不知道怎么使用的话，可以参照右边官方示例学习，或者更简便的是可以直接拖拽进代码里面，会自动生成代码，不妨动手试下吧。
二、启动图设置
SwiftUI里面我们可以直接在TARGETS -- {主项目} -- info文件中直接设置启动图的一些属性样式，其中包括图片，背景颜色等等，我们可以试着设置下启动图片：
或者可以设置一个颜色值，就可以设置启动时候的背景颜色，删除上面添加的启动图，设置
Background color：
重启工程，发现启动背景颜色就改成了当前的
AccentColor。（拓展：在Assets里面也可以自定义颜色值，当前的AccentColor也可用于项目代码中，类似AccentColor一样自定义一个颜色值，也可用于项目中）
三、常用Views / Modifies
1、Text & Label
Text 更像是OC中的UILabel,而Label更倾向于一个<标签>:
VStack{
Text("Hello, world!").padding().foregroundColor(Color("nowColor"))
Label("Label1111", systemImage: "42.circle")
}
其中nowColor为上方在Assets中自定义的颜色值，显示效果如下：
Text里的字符串可以使用
markdown语法，你也可以试试，更多使用：
//Text
Text("ContentView_Previews").italic()
.frame(width: 180,height: 100,alignment: .center)
.background(Color.red)
//Label
Label {
//此处可以添加按钮等视图一样可以实现
Text("我是Label")
} icon: {
Circle().stroke(lineWidth: 5).foregroundColor(.red).frame(width: 34,height: 34,alignment: .center).overlay(Text("5"))
}
2、Button / Link
按钮及按钮点击事件，用法如下：
Button {
print("tapbTN1")
} label: {
Text("button1").foregroundColor(.blue)
}
Button(action: {
print("tapBtn2")
}) {
Text("Button2")
}
//简单实用
Button("button3") {
print("buton3")
}.foregroundColor(.green).font(.largeTitle)
Link是链接外链的视图：
Link(destination: URL(string: "https://www.baidu.com")!) {
Text("Link1")
}
Link("Link2", destination: URL(string: "https://www.baidu.com")!)
3、Image / AsyncImage
将Image视图拖进代码，如下：
Image("Image Name")
//Image("33")
当我们将上文中33写入时，发现图片并不展示，此处有个坑，即此种写法它会去找Assets里面有没有33，上文中图片33是直接拉进来的，所以不展示，那么我们可以用下面方式显示33：
Image(uiImage: .init(named: "33")!)
但官方推荐使用在Assets里面添加图片的方式，写法简单点。
另外注意图片的填充方式：
//撑开屏幕，占满父视图（Vstack）剩余位置，不遵循宽高比(会压缩)
Image(uiImage: .init(named: "33")!).resizable()
//会根据宽高比展示，宽 > 高 以屏幕宽为最大，高 > 宽 以父视图剩余空间撑开，VStack上下撑开
Image(uiImage: .init(named: "66")!).resizable().scaledToFit()
//会根据宽高比展示，宽 > 高 以父视图剩余空间撑开，VStack上下撑开，只展示图片部分内容（会裁剪）， 高 > 宽 以屏幕最大宽度，按宽高比展示图片部分内容（会裁剪）
Image(uiImage: .init(named: "88")!).resizable().scaledToFill()
WWDC21 新出的AsyncImage类似我们OC中的三方库SD_WebImage,
AsyncImage(url: URL.init(string: "https://img1.baidu.com/it/u=333716107,1538170532&fm=253&fmt=auto&app=138&f=JPEG?w=600&h=488")) { img in
img.resizable()
} placeholder: {
ProgressView()
}.frame(width: 120,height: 200)
其中img.resizable()不可省略，不写的话，不能展示，即不写的话就是没有对加载结果图片做显示操作。
4、TimelineView / Canvas
TimelineView：按计划地去更新View。比如多久刷新一次View,也可以设定开始日期然后以怎样的时间间隔去刷新等。
- 每隔一分钟去更新
TimelineView(.everyMinute) { context in
}
- 从某个时间点开始，隔多久更新
TimelineView(.periodic(from: Date.now, by: 1.0)) { context in
Text(context.date.description).font(.largeTitle)
}
类似我们经常使用的NSTimer定时器，这种用法使用的比较多。
- 以不规则的一组时间节点去刷新
TimelineView(.explicit(...
Canvas:绘制画布，提供一块区域供我们画想画的东西。
Canvas { context, size in
context.stroke(Path(ellipseIn: CGRect(origin: .zero, size: size)), with: .color(.orange),lineWidth: 5)
}.frame(width: 100,height: 50).border(.blue,width: 3)
5、TextEditor / TextField
使用TextEditor时需要指定frame,因为它的布局默认是填充满父视图剩余空间，功能上类似于TextView：
TextEditor(text: .constant("hsjshjhajhjsh")).frame(width: 200,height: 200)
运行在模拟器上，发现键盘输入后，TextEditor上的文字不变，这里需要定义数据@State var string = "okokokok"，用string来装载输入的东西，@State我们此处不去做解释。
TextEditor(text: $string).frame(width: 200,height: 200)
这样才能达到实时显示输入内容。
TextField就是之前一样的输入框，使用如下：
TextField("PlaceHolder", text: $string).textFieldStyle(.roundedBorder).font(.largeTitle).frame(width: 200, height: 50)
//.focused()光标是否在上面
//捕捉点击Return 按钮事件
.onSubmit {
print("点击了Return")
}
.textInputAutocapitalization()设置输入框的英文文字是否大小写：
-
.characters输入的字母全转大写 -
.words输入的字母以空格为分界，自动转换为一个个单词 -
.never输入内容全为小写
.disableAutocorrection()设置键盘输入时的矫正，但平时我们不怎么希望用到此功能,可置为true或false。
注意：当我们给输入框添加圆角边框时候，如果使用下面方式效果不是很好，显示不全：
.border(.red,width: 1)
.cornerRadius(20)
此时我们可以使用下面这种方式来给TextField添加边框：
.overlay {
RoundedRectangle(cornerRadius: 20).stroke(.red,lineWidth: 10)
}
输入框使用中，我们需要关注键盘的隐藏，需要给界面一个点击事件，例如输入框在一个Vstack中，那需要给这个Vstack 添加点击事件：
.onTapGesture {
print("tap")
//热区
UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
}
点击Return能隐藏键盘，点击上方区域时，发现点击文字或别的视图显示区域可以隐藏键盘，但是Vstack区域内视图显示区域之外的空白区域不能将键盘隐藏，所以我们还需要给Vstack添加一个热区：
.contentShape(Rectangle())
热区意思就是在这个Vstack区域内的点击都能响应.onTapGesture事件。
6、Picker
一个弹窗选择器（Selecter）控件，代码如下：
enum Person: String{
case Tom
case Jim
case Lily
case Lucy
}
@State var selectedPerson = Person.Lily
var body: some View {
VStack {
Picker(selection: $selectedPerson, label: Text("Picker")) {
Text("Tom").tag(Person.Tom)
Text("Jim").tag(Person.Jim)
Text("Lily").tag(Person.Lily)
Text("Lucy").tag(Person.Lucy)
}
Text("slected Person: \(selectedPerson.rawValue)")
}
.padding()
}
.pickerStyle(.inline)当给Picker改变样式时候，展示的样式截然不同，此处使用.inline就类似.wheel的样式，也可切换着看看.segmented，此种样式就是UIKit里的UISegmentedControll。默认是.menu样式。（可以试着将Picker单独放在NavigationView中查看.pickerStyle不一样的地方）
拓展 1：SwiftUI中的文本长按选择会出现Copy/Share...弹框，默认是关闭的：
//disabled 关闭 enabled 开启
Text("slected Person").textSelection(.enabled)
7、ProgressView
进度条ProgressView，
ProgressView(value: 0.5,total: 10,label: {
//上面文字
Text("Lcr")
},currentValueLabel: {
//下面文字
Text("Lcr111")
}).background(.green)
当加上背景颜色之后，感觉视觉效果不是很好（背景色会覆盖进度条上下文字背景），所以个人觉得还是去掉上下文字，保留一条进度条就好，然后另外写上下Text去展示需要展示的数据。
.tint(.red) 设置前面进度条的颜色。
ProgressView()，这种写法默认（.circular）就是小菊花样式，.linear 进度条样式。
上面的进度条改变样式后也可以变成小菊花样式。
ProgressView().progressViewStyle(.circular)
ProgressView().progressViewStyle(.linear)
8、Slider
滑块控件Slider
@State var speed = 0 //当前值
//value当前值,in值的范围0-100,step每次滑动变化值,onEditingChanged监听滑动事件
//.tint 滑块左侧进度条颜色
Slider(value:$speed,in: 0...100,step: 25,onEditingChanged: { editing in
print(editing)
}).tint(.red)
如果需要展示前后的数值文字：
Slider(value: $speed, in: 0...100,step: 25) {
} minimumValueLabel: {
Text("0")
} maximumValueLabel: {
//Text("100")
Text("\(speed)")
}
拓展:一个容器（如VStack）里面的字视图最多不能超过10个View
9、Toggle / Stepper
类似OC中的UISwitch,开关控件
@State var toggleStatus = false
Toggle(isOn: $toggleStatus) {
Text("Toggle")
}.tint(.clear).colorMultiply(.orange)
Stepper类似购物车加减按钮：
@State var value = 0
Stepper(value: $value, in: 0...9, step: 3) {
Text("\(value)").font(.largeTitle)
}
每次增加减少都是以3来计算。
@State var value = 0
let colors:[Color] = [.orange, .red, .gray, .blue, .green, .purple, .pink]
func stepperAction(isIncrement: Bool) {
value = value + (isIncrement ? 1 : -1)
if value >= colors.count {value = 0}
if value < 0 {value = colors.count - 1}
}
Stepper {
Text("Value: \(value) Color: \(colors[value].description)").foregroundColor(colors[value]).font(Font.system(.title2).bold())
} onIncrement: {
stepperAction(isIncrement: true)
} onDecrement: {
stepperAction(isIncrement: false)
}
本文学习了一些基本的视图控件的使用，有时间拿起键盘敲起来，动动手加深印象，gogogo!!!
