实战编程·使用SwiftUI从0到1完成一款iOS笔记App(三)(1)

简介: 实战编程·使用SwiftUI从0到1完成一款iOS笔记App(三)

实战编程·使用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([]))

image.png

报错是因为我们在ContentView首页视图中通过模态弹窗跳转到NewNoteView新建笔记视图,而NewNoteView刚刚使用@Binding绑定的参数在ContentView首页视图缺少关联。

很多情况都是这样,只要使用了@Binding绑定了参数,就必须在其他与该页面关联的页面双向绑定,也是挺烦的。

我们回到ContentView首页视图,做一下双向绑定,如下图所示:

image.png

新建笔记方法

新建笔记操作可以和创建View视图的方式一样,先创建一个方法,然后在需要的地方调用这个方法,新建笔记的方法如下代码所示:

// MARK: 新建笔记方法
func addNote(writeTime:String,title:String,content:String) {
    let note = NoteItem(writeTime: writeTime, title:title,content:content)
    noteItems.append(note)
}

image.png

上述代码中,我们创建了一个新建笔记的方法addNote,传入三个String类型的参数:writeTime录入时间、title标题、content内容。

然后将传入的参数的值赋予NoteItem模型类中,并赋值给note常量。

声明note常量是常用的编程方法,当代码太长的时候就会抽离出来赋值,后面再使用。

最后我们noteItems数组使用append将note的内容插入到noteItems数组数组中。

使用addNote方法时,只需要在执行动作时调用并且赋值就行了。在NewNoteView新建笔记视图中,点击“完成”按钮时,创建将会创建一条新笔记,我们在点击“完成”按钮时调用addNote方法。如下代码所示:

addNote(writeTime: "", title: title, content: content)

image.png

上述代码中,我们在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())
}

image.png

上述代码中,我们创建一个获得当前时间的方法getCurrentTime,获得时间后返回 一个String类型的返回值。

使用DateFormatter格式化方法,时间格式为“YYYY.MM.dd”,也就是XXXX年XX月XX日的展示格式,最后return当前时间戳。

我们将getCurrentTime方法赋予addNote添加笔记的方法中的writeTime参数,当我们迫不及待地回到ContentView首页视图想尝试使用时,发现并没有实现新建笔记操作.

这是因为什么呢?

我们看看原来NoteListView笔记列表视图的方法,发现这里使用@State声明了NoteItem模型类数组,是的,这导致了在NewNoteView新建笔记视图的新建笔记参数没有能回传回来。

是的,这里埋了一个坑。


相关文章
|
12月前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
1938 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
12月前
|
移动开发 JavaScript 应用服务中间件
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
1236 5
【06】优化完善落地页样式内容-精度优化-vue加vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
12月前
|
移动开发 Rust JavaScript
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
1295 4
【01】首页建立-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
|
12月前
|
移动开发 Android开发
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
549 0
|
存储 移动开发 监控
App Trace功能实战:一键拉起、快速安装与免提写邀请码的应用实践
App Trace系统通过一键拉起、快速安装和免提写邀请码三大功能,显著提升用户转化率、安装成功率和邀请注册率。结合深度技术实现与优化,助力公司用户增长,成为移动端核心基础设施。
|
12月前
|
缓存 移动开发 JavaScript
如何优化UniApp开发的App的启动速度?
如何优化UniApp开发的App的启动速度?
1724 139
|
12月前
|
移动开发 JavaScript weex
UniApp开发的App在启动速度方面有哪些优势和劣势?
UniApp开发的App在启动速度方面有哪些优势和劣势?
783 137
|
移动开发 小程序 Android开发
基于 uni-app 开发的废品回收类多端应用功能与界面说明
本文将对一款基于 uni-app 开发的废品回收类多端应用,从多端支持范围、核心功能模块及部分界面展示进行客观说明,相关资源信息也将一并呈现。
371 0
|
12月前
|
数据采集 JavaScript 前端开发
开发比分App?你缺的不是程序员
开发体育比分App,关键不在代码,而在懂体育、懂数据、懂用户。明确定位、理清需求、选好数据源,再找专业的产品、数据与技术人才协同,才能少走弯路。程序员最后入场,效率最高。
464 154