实战编程·使用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新建笔记视图的新建笔记参数没有能回传回来

是的,这里埋了一个坑。


相关文章
|
2月前
|
API Android开发 iOS开发
深入探索Android与iOS的多线程编程差异
在移动应用开发领域,多线程编程是提高应用性能和响应性的关键。本文将对比分析Android和iOS两大平台在多线程处理上的不同实现机制,探讨它们各自的优势与局限性,并通过实例展示如何在这两个平台上进行有效的多线程编程。通过深入了解这些差异,开发者可以更好地选择适合自己项目需求的技术和策略,从而优化应用的性能和用户体验。
|
2月前
|
JSON JavaScript 前端开发
harmony-chatroom 自研纯血鸿蒙OS Next 5.0聊天APP实战案例
HarmonyOS-Chat是一个基于纯血鸿蒙OS Next5.0 API12实战开发的聊天应用程序。这个项目使用了ArkUI和ArkTS技术栈,实现了类似微信的消息UI布局、输入框光标处插入文字、emoji表情图片/GIF动图、图片预览、红包、语音/位置UI、长按语音面板等功能。
221 2
|
2月前
|
监控 算法 iOS开发
深入探索iOS函数调用栈:符号化与性能调优实战
在iOS开发中,理解函数调用栈对于性能调优和问题排查至关重要。函数调用栈记录了程序执行过程中的函数调用顺序,通过分析调用栈,我们可以识别性能瓶颈和潜在的代码问题。本文将分享iOS函数调用栈的基本概念、符号化过程以及如何利用调用栈进行性能调优。
47 2
|
3月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
685 0
|
4月前
|
Swift iOS开发 UED
揭秘一款iOS应用中令人惊叹的自定义动画效果,带你领略编程艺术的魅力所在!
【9月更文挑战第5天】本文通过具体案例介绍如何在iOS应用中使用Swift与UIKit实现自定义按钮动画,当用户点击按钮时,按钮将从圆形变为椭圆形并从蓝色渐变到绿色,释放后恢复原状。文中详细展示了代码实现过程及动画平滑过渡的技巧,帮助读者提升应用的视觉体验与特色。
82 11
|
5月前
|
消息中间件 Java
【实战揭秘】如何运用Java发布-订阅模式,打造高效响应式天气预报App?
【8月更文挑战第30天】发布-订阅模式是一种消息通信模型,发送者将消息发布到公共队列,接收者自行订阅并处理。此模式降低了对象间的耦合度,使系统更灵活、可扩展。例如,在天气预报应用中,`WeatherEventPublisher` 类作为发布者收集天气数据并通知订阅者(如 `TemperatureDisplay` 和 `HumidityDisplay`),实现组件间的解耦和动态更新。这种方式适用于事件驱动的应用,提高了系统的扩展性和可维护性。
89 2
|
5月前
|
JSON 搜索推荐 定位技术
打造个性化天气应用:iOS开发实战
【8月更文挑战第31天】在这篇文章中,我们将一起探索如何从零开始构建一个iOS天气应用。通过简单易懂的步骤,你将学习到如何使用Swift编程语言和苹果的开发工具Xcode来实现这个目标。我们会涉及到用户界面设计、网络编程以及数据解析等关键技能,确保你能够顺利地完成这个项目。无论你是初学者还是有一定经验的开发者,这篇文章都会带给你新的启发和收获。
|
7天前
|
前端开发 Java 开发工具
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
|
1天前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
100 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
4天前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程

热门文章

最新文章