简单APP——ToDoList的二次开发(日期规范化+构建搜索栏）
极简第一版
极简版教学：SwiftUI:从零点五开始的APP开发之路 https://www.bilibili.com/video/BV1Kg4y1i7dd?p=1
原项目代码为自己寒假在跟学时的代码，由于版本不同所以和原视频的代码在通知推送方面有一些出入
运行效果
已实现功能
该APP已经是个完整的独立APP，已实现功能如下：
1、自定义添加、收藏和取消收藏、删除事项，并同时支持单选和多选统一操作
2、在事项结束时间到达时向用户发送通知和提醒，在首次打开APP前询问用户许可发送通知权限
待完善
1、日期格式并没有进行设置和规范化
2、在进行事项按时间排序时，对id进行了修改，在swiftUI中很容易会导致一些奇怪的问题
3、已完成数据的增删改而没有查找功能
二次开发
日期格式
原版的日期格式是这个样子的：
这非常乱码，那么我们只需要在初始化的时候，规范一下日期格式
为了方便使用，我们定义一个Date转为规范模式后的String（因为我们输出的时候时以字符串的方式）的方法：
//日期 -> 字符串
func date2String(_ date:Date, dateFormat:String = "yyyy-MM-dd HH:mm:ss") -> String {
let formatter = DateFormatter()
formatter.locale = Locale.init(identifier: "zh_CN")
formatter.dateFormat = dateFormat
let date = formatter.string(from: date)
return date
}
然后在SingleCardView中，更改显示日期部分的代码
Text(date2String(self.UsrData.ToDoList[index].duedate)) //原代码为：self.UsrDate.ToDoList[index].duedate.description,即仅仅将date转换为string
.font(.subheadline)
.foregroundColor(Color.gray)
完成后新的效果如下：
id的维护
在第一版中，我们在sort排序后，对id进行了更新和修改。在swiftUI中尽量不要修改元素的id，因为id是区分不同View的方式，所以直接更改id会出现一些问题（尤其是动画方面）
对此进行进一步完善主要涉及到UserData里的sort()和ContentView中的SingleCardView
sort()
对于sort()的修改方式及其简单暴力——直接把id更新删掉即可
//第一版：
func sort() {
self.ToDoList.sort(by: {(data1, data2) in
return(data1.duedate.timeIntervalSince1970 < data2.duedate.timeIntervalSince1970)
})
for i in 0..<self.count {
self.ToDoList[i].id = i
}
}
//第二版：
func sort() {
self.ToDoList.sort(by: {(data1, data2) in
return(data1.duedate.timeIntervalSince1970 < data2.duedate.timeIntervalSince1970)
})
}
SingleCardView
由于sort方法没有更改id，因此元素的id不再与其在数组ToDoList中的个数（index）相同；因此我们使用一个计算属性index来找到ToDoList中对应的singleToDo是在数组中的哪一个；
我们在SingleCardView中以前的index改为以下代码
var singleData: SingleToDo
var index: Int{
self.UsrData.ToDoList.firstIndex(where: {data in data.id == self.singleData.id})!
}
并在Content()调用SIngleCardView时将传入的index改为singleData
查找（搜索）功能
与uIKit不同的是，SwiftUI没有内置的搜索栏控制，但是搭建一个并不很难
搜索栏UI
IOS中的标准搜索栏，它实际上由一个文本字段和一个取消按钮组成。
首先，我们声明了两个变量：一个是搜索文本的绑定，另一个是存储搜索字段状态的变量(编辑与否)。并且，只有当用户点击搜索字段时，才会显示取消按钮
import SwiftUI
struct Search: View {
@Binding var text: String
@State private var isEditing = false
var body: some View {
HStack {
TextField("Search...", text: self.$text)
.padding(7)
.padding(.horizontal, 25)
.background(Color(.systemGray6))
.cornerRadius(8)
.overlay( //文本字段上覆盖两个系统图像
HStack {
Image(systemName: "magnifyingglass")
.foregroundColor(.gray)
.frame(minWidth:0, maxWidth: .infinity, alignment: .leading)
.padding(.leading, 8)
if isEditing {
Button(action: {
self.text = ""
}) {
Image(systemName: "multiply.circle.fill")
.foregroundColor(.gray)
.padding(.trailing, 8)
}
}
}
)
.padding(.horizontal, 10)
.onTapGesture {
self.isEditing = true
}
if isEditing {
Button(action: {
self.isEditing = false
self.text = ""
}) {
Text("Cancel")
}
.padding(.trailing, 10)
.transition(.move(edge: .trailing))
.animation(.default)
}
}
}
}
struct Search_Previews: PreviewProvider {
static var previews: some View {
Search(text: .constant(""))
.padding(.leading)
}
}
效果如下：
使用搜索栏进行数据过滤
切换到ContentView.swift并将搜索栏添加到列表视图中
在body中添加
Search(text: self.$searchText)
.padding(.top, 11.0)
视图如下：
然后在显示的时候再加一个判断当前是否在搜索，如果不在就都显示，如果在搜索就只显示title中包含搜索词的事项卡片
if searchText.isEmpty {
ForEach (self.UsrData.ToDoList) { item in
if item.deleted == false {
if !self.showFavouriteOnly || item.isFavourite {
SingleCardView(singleData : item, editingMode: self.$editingMode, selected: self.$selected)
.environmentObject(self.UsrData)
.padding()
.animation(.spring())
.transition(.slide)
}
}
}
} else {
ForEach (self.UsrData.ToDoList) { item in
if item.deleted == false {
if item.title.contains(self.searchText) {
SingleCardView(singleData : item, editingMode: self.$editingMode, selected: self.$selected)
.environmentObject(self.UsrData)
.padding()
.animation(.spring())
.transition(.slide)
}
}
}
}
完善后效果
小结
SwiftUI的既有他的方便快捷的方式，也方便开发者面向其他UI最终效果进行一个项目的迁移和设计
与Android开发还是有一定不同，优化和美化也是不断学习完善的过程
