实战编程·使用SwiftUI从0到1完成一款iOS笔记App(三)
前提回顾
在上两章节中,我们完成了念头笔记首页
、新建笔记
页面的页面构建,以及两个页面之间的简单交互
。单独从前端角度来看,静态项目已经搭建完毕,接下来我们要进入到更加深层次一点点的学习。
在本章中,我们将实现继续实现念头笔记的新建一条笔记
的交互。
新建笔记
我们先来完成新建笔记的操作,在之前的章节里我们创建了一个类NoteItem来作为Model数据用来遍历列表数据,而新建笔记的方法也很简单,我们只需要在NoteItem
类数组中插入一条数据
,并且插入的数据信息是我们标题输入框以及内容输入框输入的数据就行了。
首先需要在NewNoteView
视图中,创建用于双向绑定
的NoteItem类数组,如下代码所示:
@Binding var noteItems: [NoteItem]
因为使用@Binding
进行双向绑定,在NewNoteView视图预览时需要加一个默认值,如下代码所示:
less
复制代码
NewNoteView(title: "", content: "", showNewNoteView: .constant(true), noteItems: .constant([]))
报错是因为我们在ContentView首页视图中通过模态弹窗跳转到NewNoteView新建笔记视图,而NewNoteView刚刚使用@Binding绑定的参数在ContentView首页视图缺少关联。
很多情况都是这样,只要使用了@Binding绑定了参数,就必须在其他与该页面关联的页面双向绑定,也是挺烦的。
我们回到ContentView首页视图,做一下双向绑定,如下图所示:
新建笔记方法
新建笔记操作可以和创建View视图的方式一样,先创建一个方法,然后在需要的地方调用这个方法,新建笔记的方法如下代码所示:
// MARK: 新建笔记方法 func addNote(writeTime:String,title:String,content:String) { let note = NoteItem(writeTime: writeTime, title:title,content:content) noteItems.append(note) }
上述代码中,我们创建了一个新建笔记的方法addNote
,传入三个String类型的参数:writeTime
录入时间、title
标题、content
内容。
然后将传入的参数的值赋予NoteItem模型类中,并赋值给note常量。
声明note常量是常用的编程方法,当代码太长的时候就会抽离出来赋值,后面再使用。
最后我们noteItems数组使用append将note的内容插入到noteItems数组数组中。
使用addNote方法时,只需要在执行动作时调用并且赋值就行了。在NewNoteView新建笔记视图中,点击“完成
”按钮时,创建将会创建一条新笔记,我们在点击“完成
”按钮时调用addNote
方法。如下代码所示:
addNote(writeTime: "", title: title, content: content)
上述代码中,我们在saveBtnView
“完成按钮”视图点击时调用addNote
方法,并且将3个参数赋值,但我们看到writeTime参数是String字符串类型,我们赋值了空值。
获得时间方法
writeTime
参数是录入时间,我们需要在新建笔记时需要获得当前系统的时间,并存起来。这里需要注意2点,一是时间需要精确到“天
”,二是writeTime参数是String
字符串类型,而时间常常是Date
类型,还有可能做格式转换。
我们依旧可以创建一个方法来获得当前的系统时间,如下代码所示:
// MARK: 获取当前系统时间 func getCurrentTime() -> String { let dateformatter = DateFormatter() dateformatter.dateFormat = "YYYY.MM.dd" return dateformatter.string(from: Date()) }
上述代码中,我们创建一个获得当前时间的方法getCurrentTime
,获得时间后返回 一个String类型的返回值。
使用DateFormatter
格式化方法,时间格式为“YYYY.MM.dd
”,也就是XXXX年XX月XX日的展示格式,最后return
当前时间戳。
我们将getCurrentTime方法赋予addNote添加笔记的方法中的writeTime参数,当我们迫不及待地回到ContentView首页视图想尝试使用时,发现并没有实现新建笔记操作.
这是因为什么呢?
我们看看原来NoteListView笔记列表视图的方法,发现这里使用@State
声明了NoteItem模型类数组,是的,这导致了在NewNoteView新建笔记视图的新建笔记参数没有能回传回来。
是的,这里埋了一个坑。