SwiftUI-公司打卡开发

SwiftUI是苹果官方出的一个针对UIKit的提升版，意在数据推动UI变动，让我们重点关心在数据上，摆脱了UI布局的困扰，那么今天我们就来学习一个Demo，公司打卡记录的Demo,指在通过粒子能更好的掌握其中的一些使用技巧，和一些开发思路。另外官方也有很好的Demo也可以去学习一下。我们做好的效果大概如下：

 

 

这个是单独测试的一条数据，每天只能打一次上下班的卡。看完今天的的文章，你也可以做一个这样的例子了。下面直接上代码：

首先创建一个工程，我们先命名为OfficeManger，然后我们首先定义一个打卡的数据模型。创建一个文件DateModel.swift

struct DateModel: Codable,Identifiable {
    let id: String
    var beginTime: String?
    var endTime: String?
    var date: String?
    
    var color: Color {

        if dateWeek?.contains("星期日") == true || dateWeek?.contains("星期六") == true {
            return Color.init(red: 219.0/255.0, green: 80.0/255.0, blue: 72.0/255.0)
        }
        return Color.init(red: 35.0/255.0, green: 160.0/255.0, blue: 96.0/255.0)
    }
    
    var dateWeek: String? {
        guard let dateItem = date else{
            return nil;
        }
        if dateItem.contains("星期") && dateItem.contains("年") {
            return dateItem;
        }
        let formater = DateFormatter();
        formater.dateFormat = "yyyy年MM月dd日"
        formater.calendar = .init(identifier: .gregorian);
        formater.locale = Locale(identifier: "zh-Hans_US");

        let fullDate = "2020年" + dateItem;
        if let valueDate = formater.date(from: fullDate) {
            
            formater.dateFormat = "yyyy年MM月dd日 EEEE"

            let stringValue = formater.string(from: valueDate)
            return stringValue
        }
        return dateItem
        
    }
        
    
    var beginTimeValue: String {
        if let time = beginTime {
            return "上班：" + time
        }
        return "未打卡"
    }
    var endTimeValue: String {
        if let time = endTime {
            return "下班：" + time
        }
        return "未打卡"
    }
    
    init(beginTime: String?,endTime: String?,date: String?) {
        self.beginTime = beginTime;
        self.endTime = endTime;
        self.date = date;
        let dateFormater = DateFormatter();
        dateFormater.dateFormat = "yyyyMMddHHmmssSSS";
        dateFormater.calendar = .init(identifier: .gregorian)
        self.id = dateFormater.string(from: Date())
    }
    
   
    
    var currentTime: String {
        let formater = DateFormatter()
        formater.dateFormat = "HH:mm:ss";
        formater.calendar = .init(identifier: .gregorian);
        return formater.string(from: Date())
    }
    
    
    
}

这里需要我们注意一下，我们定定义的模型需要实现Identifiable的协议，这个是区别的数据的唯一标志，另外我们也简单的封装了一下方法，以便以后使用。另外我们还需要，扩展一下这个结构体。

extension DateModel {
    static func readDataFromDisk() -> [DateModel] {
        let path = NSSearchPathForDirectoriesInDomains(.documentDirectory, .userDomainMask, true)[0] + "/data";
        
        
        guard let data = try? Data(contentsOf: URL(fileURLWithPath: path)) else{
            return [DateModel]()
        }
        let json = JSONDecoder();
        let list = try? json.decode([DateModel].self, from: data);
        if let otherList = list {
           let newList = otherList.sorted { (a, b) -> Bool in
            
                a.dateWeek?.compare(b.dateWeek ?? "") == ComparisonResult.orderedDescending
            }
            return newList
        }
        return list ?? [DateModel]()
    }
    
    
}

好了这个上下班的数据模型基本就好了，我们需要一个管理数据模型的类。我们需要再定义一个类如下：

class DateItemModel: ObservableObject,Identifiable {
    var id = 99
    
    @Published var list = DateModel.readDataFromDisk() {
        didSet{
            saveData()
        }
    }
    
    var currentDate: String {
        let formater = DateFormatter()
        formater.dateFormat = "yyyy年MM月dd日 EEEE";
        formater.locale = Locale(identifier: "zh-Hans_US")
        formater.calendar = .init(identifier: .gregorian);
        return formater.string(from: Date());
    }
    
    func saveData() {
        let path = NSSearchPathForDirectoriesInDomains(.documentDirectory, .userDomainMask, true)[0] + "/data";

        let file = FileManager.default;
        if !file.fileExists(atPath: path) {
            file.createFile(atPath: path, contents: nil, attributes: nil);
        }
        let json = JSONEncoder();
        let data = try? json.encode(list);
        try? data?.write(to: URL(fileURLWithPath: path))
        
    }
    
    
}

这个是管理数据模型的的观察类，他会管理数据的变更和保存。@Published表示的是当list改变时候，观察他的视图会自动更新，不需要我们手动去刷新视图了，是不是方便了很多。

那么我们在看ContentView.swift文件，我们首先创建一个Cell

struct DateTimeItem: View {
    @Binding var model: DateModel
    let date: String
    
    
    
    var body: some View {
        VStack{
            HStack {
                //                LabelText()
                Text(getCurrentDate()).foregroundColor(model.color).font(Font.system(size: 18, weight: .bold, design: .serif))
                Spacer()
                
            }.padding(.bottom, 12)
            
            HStack {
                Text(model.beginTimeValue)
                Spacer()
                Text(model.endTimeValue)
            }
        }
    }
    
    func getCurrentDate() -> String {
        if let sDate = model.dateWeek {
            return sDate
        }
        return date
    }
    
}

这个是用来显示每条的数据具体记录的。然后在创建一个List到视图中即可如下：

var contentView: some View {
        
        VStack {
            
            List{ 
                
                ForEach(model.list) { (item: DateModel) in
                    
                    DateTimeItem(model: .constant(item), date: self.model.currentDate)
                    
                }.onDelete { (set: IndexSet) in
                    if let index = set.first {
                        let item = self.model.list[index];
                        self.tapGestureAction(item: item)
                    }
                }
                
            }
            
            ButtonItems(model: .constant(self.model)) { (tag) in
                
                if tag == 0 {
                    self.enterLocation()
                }else if tag == 1 {
                    self.outLocation()
                }
                
            }
            
            
            
        }.navigationBarTitle(Text("打卡记录"), displayMode: .inline).navigationBarItems(trailing: Button(action: { 
            self.qingJiaAM()
            
        }, label: { 
            Text("请假")
        }))
        
        
    }

这个会有一个滑动删除的效果，这里有个疑问，目前只有ForEach这个组件有左滑删除，但是List确没有，也许官方以后会加上的，我们就先这样使用个，最后呢我们组合一下就好了如下：

var body: some View {
        NavigationView {
            contentView
            
        }.alert(isPresented: $isAlert) { 
            Alert(title: Text(alertTitle), message: nil, primaryButton: .cancel(), secondaryButton: .default(Text("确定"), action: { 
                self.buttonAction?()
            }))
        }
    }
    

整体来说里面还是比较简单的，但是里边的数据推动UI这个对开发者来说确实省了不少事，而且也简化了很多不必要的步骤，真是省心又省力，那么我们把Demo放在文章的末尾，如果有需要的小伙伴可以下载。

后话：对于@EnvironmentObject、@State、@Published、@Binding这几个特性，不太了解的同鞋，可以看一下这一篇文章，如果还是不太明白建议多做几个小Demo,熟能生巧，我相信你一定会理解的更深的。

最后的最后Demo连接猛戳这里。