1. OnAppear 加载周期显示状态
1.1 实现
/// 加载周期显示状态
struct OnAppearBootcamp: View {
@State var myText: String = "Start text."
@State var count: Int = 0
var body: some View {
NavigationView{
ScrollView{
Text(myText)
LazyVStack{
ForEach(0..<50) { _ in
RoundedRectangle(cornerRadius: 25)
.frame(height: 200)
.padding()
.onAppear {
count += 1
}
}
}
}
// ScrollView 加载完成调用
.onAppear(perform: {
DispatchQueue.main.asyncAfter(deadline: .now() + 5){
myText = "This is new text!"
}
})
// 离开 View,或者屏幕,调用
.onDisappear(perform: {
myText = "Ending text."
})
.navigationTitle("On Appear: \(count)")
}
}
}
1.2 展示图:
2. IfLetGuard 安全语法编码的使用
2.1 实现
/// 安全语法编码
struct IfLetGuardBootcamp: View {
@State var currentUserID: String? = nil // "9527"
@State var displayText: String? = nil
@State var isLoading: Bool = false
var body: some View {
NavigationView{
VStack{
Text("Here we are practicing safe coding")
if let text = displayText {
Text(text)
.font(.title)
}
// 如果看到用了感叹号解包,这是一种很不好的编码方式,有更好的方式去代替它 if let / guard let
//Do not user ! ever!!!
//Do not force unwrap values
//Text(displayText!)
if isLoading{
// 加载 View
ProgressView()
}
Spacer()
}
.navigationTitle("Safe coding")
.onAppear {
// loadData()
loadData2()
}
}
}
/// if let 保护语句
func loadData(){
if let userID = currentUserID{
isLoading = true
DispatchQueue.main.asyncAfter(wallDeadline: .now() + 3) {
displayText = "This is new data! User id is: \(userID)"
isLoading = false
}
}else {
displayText = "Error,There is user ID!"
}
}
/// guard let 保护语句
func loadData2(){
// userID 为 nil 时,会执行 else 中语句
// 如果为 true ,则会 跳过 else 语句 执行
guard let userID = currentUserID else{
displayText = "Error,There is user ID!"
return
}
isLoading = true
DispatchQueue.main.asyncAfter(wallDeadline: .now() + 3) {
displayText = "This is new data! User id is: \(userID)"
isLoading = false
}
}
}
2.2 效果图:
3. TapGesture 点击事件的使用
3.1 实现
/// 点击事件
struct TapGestureBootcamp: View {
@State var isSelected: Bool = false
var body: some View {
VStack(spacing: 40) {
RoundedRectangle(cornerRadius: 25)
.frame(height: 200)
.foregroundColor(isSelected ? Color.green : Color.red)
Button {
isSelected.toggle()
} label: {
Text("Button")
.font(.headline)
.foregroundColor(.white)
.frame(height: 55)
.frame(maxWidth: .infinity)
.background(Color.blue)
.cornerRadius(25)
}
Text("TAP Gesture")
.font(.headline)
.foregroundColor(.white)
.frame(height: 55)
.frame(maxWidth: .infinity)
.background(Color.blue)
.cornerRadius(25)
// 单击
// .onTapGesture {
// isSelected.toggle()
// }
// 单机次数 按钮没有点击效果
.onTapGesture(count: 2) {
isSelected.toggle()
}
Spacer()
}
.padding(40)
}
}
3.2 效果图: