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,熟能生巧,我相信你一定会理解的更深的。