OnAppear, IfLetGuard, TapGesture 的使用

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 效果图:

猜你喜欢

转载自blog.csdn.net/u011193452/article/details/131701543