SwiftUI实战-自定义TextField搭建登录页面UI

实现登录页面UI基本搭建

效果图：

自定义TextField.gif

将学到的内容：
1、实现密码输入的SecureField模式
2、监听输入框的内容变化
3、输入限制字数输入
4、ViewModifier的拓展使用
5、PreferenceKey 传值使用

相关源码如下：
LoginView.swift

import SwiftUI

struct LoginView: View {
    
    //@EnvironmentObject var lauchViewVM: LauchViewModel
    @Environment(\.presentationMode) var presentationMode
    
    @State var account: String = ""
    @State var password: String = ""
    @State var content: String?
    @State var attributedText: NSAttributedString?
    @State var isSecureField = true
    @State var isShowClear = false
    
    var body: some View {
        /*
        // 输入监听
        let binding = Binding<String>(get: {
               self.account
           }, set: {
               debugPrint($0)
               self.account = $0
           })
         */
        
        
        VStack {
            VStack {
                HStack {
                    Text("账号:").padding(.horizontal, 10)
                    Spacer().frame(width: 0)
                    CSInputTextField.init(placeholder: "请输入账号", text: $account) { value in
                        //debugPrint(value)
                    }
                    .frame(height: 40)
                    .overlay(
                        RoundedRectangle(cornerRadius: 5, style: .continuous)
                            .stroke(.orange, lineWidth: 1.0)
                    )
                }
                
                /*
                HStack {
                    CSSTextView.init(placeholder: "请输入内容", attributedText: $attributedText, onCommit: { value in
                        debugPrint(value)
                    })
                    .frame(height: 100)
                    .overlay(
                        RoundedRectangle(cornerRadius: 5, style: .continuous)
                            .stroke(.orange, lineWidth: 1.0)
                    )
                }
                 */
                
                HStack {
                    Text("密码:").padding(.horizontal, 10)
                    Spacer().frame(width: 0)
                    ZStack {
                        CSInputTextField.init(placeholder: "请输入密码", text: $password, isSecureField: isSecureField) { value in
                            debugPrint(value)
                        }
                        .frame(height: 40)
                        .preference(key: CustomPreferenceKey<String>.self, value: password)
                        .onPreferenceChange (CustomPreferenceKey<String>.self) { value in
                            //  只能传到上一级的父组件
                            debugPrint(value)
                            if value.count > 6 {
                                password = String(value.prefix(6))
                            }
                            isShowClear = value.count > 0
                        }
                        HStack {
                            Spacer()
                            if isShowClear {
                                Image.init(systemName: "xmark")
                                    .resizable()
                                    .aspectRatio(contentMode: .fit)
                                    .padding(.trailing, 10)
                                    .frame(width: 20, height: 20)
                                    .onTapGesture {
                                        password = ""
                                    }
                            }

                            /*
                            Text(isSecureField ? "查看" : "隐藏")
                                .padding(.leading, 5)
                                .padding(.trailing, 5)
                                .onTapGesture {
                                isSecureField.toggle()
                            }
                             */
                        }
                    }
                    .overlay(
                        RoundedRectangle(cornerRadius: 5, style: .continuous)
                            .stroke(.orange, lineWidth: 1.0)
                    )
                }
                
                HStack {
                    Button.init {
                        
                    } label: {
                        Text("登录")
                            .foregroundColor(Color.white)
                            .frame(maxWidth: .infinity, minHeight: 45, maxHeight: 45)
                            .background(Color.orange)
                            .cornerRadius(5)
                            .overlay(
                                RoundedRectangle(cornerRadius: 5, style: .continuous)
                                    .stroke(.orange, lineWidth: 1.0)
                            )
                        
                    }
                    
                }
                .frame(maxWidth: .infinity, minHeight: 45, maxHeight: 45)
            }
            .padding(.top, 50)
            .padding(.horizontal, 20)
            Spacer()
        }
        
        .navigationBarTitle("登录", displayMode: .inline)
        .navigationBarItems(trailing: Button.init(action: {
            
        }, label: {
            NavigationLink.init(destination: RegisterView()) {
                Text("注册")
            }
        }))
    }
}

CSInputTextField.swift