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

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

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


前提回顾

在上几个章节,我们完成了念头笔记的基本页面的编程,并在上一章节中完成新建笔记的交互逻辑。

这几天和读者沟通时收到反馈,念头笔记项目哪怕只有2个页面交互,但是变量的双向绑定很是麻烦,只要使用到@Binding声明变量的视图,在所有用到该视图的页面都需要做双向绑定,这不优雅。

在本章中,基于上一章完成的新建笔记交互逻辑的基础上,我们尝试使用MVVM模式修改代码和完善其他功能。本章内容较多,参数及方法调整可能会导致一堆临时性的BUG,请耐心学习和修改。

项目结构

首先是项目结构部分,目前我们完成了Model模型类ToastView吐司视图ContentView首页NewNoteView新建笔记视图。如下图所示:

image.png

按照项目编程的习惯,我们其实在正式编程前需要建立基础的页面结构,将模型类、视图、实现方法按照文件夹分开。

在Xcode视图窗口右键,选择New Group,创建一个新的文件夹,如下图所示:

image.png

我们将新的文件夹命名为Model,并把Model.swift文件拖到里面,如下图所示:

image.png

同理,我们再创建一个View文件夹、Extension文件夹、ViewModel文件夹,并将ContentView.swiftNewNoteView.swift文件放入View文件夹中,将ToastView.swift放入Extension文件夹中,如下图所示:

image.png

以上便是一个基础的项目的文件结构,Model文件夹中放入需要使用的模型类,View文件夹中放入相应的页面,而ViewModel文件夹放入功能的实现逻辑和方法,这便是之后要使用MVVM开发模式的做法。

至于其他的Swift文件,拓展的功能类可以创建名为Extension的文件夹,封装好的功能类可以放在Utils文件夹,公共类可以放在Constants文件夹......这些都是看项目和个人需要创建和使用。

Model

Model是我们的模型类,用于定义数据及其类型,由于我们需要用到MVVM开发模式,因此Model文件中只需要定义简单的参数就行了。如下代码所示:

import Foundation
import SwiftUI
struct NoteModel: Identifiable,Codable{
    var id = UUID()
    var writeTime: String
    var title: String
    var content: String
}

image.png

上述代码中,为了更好说明MVVM开发模式中的Model,我们更改NoteItem模型类名称为NoteModel便于理解。参数重命名的方式为选择参数点击右键,选择Refactor,选择Rename,修改为NoteModel

为了使用NoteModel模型类的序列化数据,NoteModel需要遵循Codable协议。

ViewModel

我们在ViewModel文件夹下创建一个新的Swift文件,命名为ViewModel.swift。如下图所示:

image.png

基础概念

ViewModel是用来干什么的?

简单来说,Model是声明数据模型参数的,View是用来构建页面和基础交互的,ViewModel是用来实现基础功能的,包含念头笔记的增删改查,都是在ViewModel中实现,然后在View视图中调用,做到页面和数据分开。

而我们可以看到在ContentView首页视图和NewNoteView新建笔记视图中有很多参数是需要进行双向绑定的,如果不使用ViewModel的方式,那么页面之间都需要声明相同的参数,并做双向绑定。页面一多,那就和套娃一样,一直“回绑”。

我们创建一个ViewModel类,并遵循ObservableObject协议,如下代码所示:

import Combine
import Foundation
import SwiftUI
class ViewModel: ObservableObject {
}

上述代码中,我们引用Combine框架,Combine为应用处理事件(增删改查)提供了一种声明性的方法。然后我们创建了一个ViewModel类,遵循ObservableObject协议,ObservableObject协议可以在视图外绑定自定义的对象,便于开发者使用。

参数声明

在ViewModel类中,我们声明需要用到的参数,如下代码所示:


class ViewModel: ObservableObject {
    //数据模型
    @Published var noteModels = [NoteModel]()
    //笔记参数
    @Published var writeTime: String = ""
    @Published var title: String = ""
    @Published var content: String = ""
    @Published var searchText = ""
  //判断是否正在搜索
    @Published var isSearching:Bool = false
    //判断是否是新增
    @Published var isAdd:Bool = true
    //打开新建笔记弹窗
    @Published var showNewNoteView:Bool = false
    //打开编辑笔记弹窗
    @Published var showEditNoteView:Bool = false
    //打开删除确认弹窗
    @Published var showActionSheet:Bool = false
    //提示信息
    @Published var showToast = false
    @Published var showToastMessage: String = "提示信息"
}

上述代码中,noteModels为引用NoteModel模型类数据,构建数组。

然后是念头笔记需要用到的参数writeTimetitlecontent,搜索栏用到的参数searchText。当搜索时,可能会由于关键字搜索为空,导致搜索列表变成“缺省图”模式,因此还需要声明一个参数isSearching,判断当前是否处于搜索状态。

很多笔记App开发都会把新建页面和编辑页面分开写,包括网上下载下来的代码基本都是新增、编辑两个页面,而两个页面使用相同的代码。亦或者是干脆就没有编辑页面,只能新增、删除,不能编辑,这都不够优雅。

因此,为了共用页面,我们声明了3个Bool类型的参数isAddshowNewNoteViewshowEditNoteView

isAdd用来 判断当前是新增操作还是编辑操作,showNewNoteView用来绑定打开新增笔记弹窗的触发条件,showEditNoteView用来绑定编辑弹窗的触发条件。

然后是删除操作,删除操作也需要声明参数触发,这里声明的参数名为showActionSheet

最后是Toast提示部分,使用到的两个参数showToast是否展示Toast,以及showToastMessage提示信息内容,我们也在ViewModel里声明。

如此,我们便把所有页面用到的参数都抽离出来,后面就不需要在所有页面都声明一样的变量,且保持代码清晰。


相关文章
|
26天前
|
传感器 iOS开发 UED
探索iOS生态系统:从App Store优化到用户体验提升
本文旨在深入探讨iOS生态系统的多个方面,特别是如何通过App Store优化(ASO)和改进用户体验来提升应用的市场表现。不同于常规摘要仅概述文章内容的方式,我们将直接进入主题,首先介绍ASO的重要性及其对开发者的意义;接着分析当前iOS平台上用户行为的变化趋势以及这些变化如何影响应用程序的设计思路;最后提出几点实用建议帮助开发者更好地适应市场环境,增强自身竞争力。
|
1月前
|
JSON JavaScript 前端开发
harmony-chatroom 自研纯血鸿蒙OS Next 5.0聊天APP实战案例
HarmonyOS-Chat是一个基于纯血鸿蒙OS Next5.0 API12实战开发的聊天应用程序。这个项目使用了ArkUI和ArkTS技术栈,实现了类似微信的消息UI布局、输入框光标处插入文字、emoji表情图片/GIF动图、图片预览、红包、语音/位置UI、长按语音面板等功能。
72 2
|
1月前
|
监控 算法 iOS开发
深入探索iOS函数调用栈:符号化与性能调优实战
在iOS开发中,理解函数调用栈对于性能调优和问题排查至关重要。函数调用栈记录了程序执行过程中的函数调用顺序,通过分析调用栈,我们可以识别性能瓶颈和潜在的代码问题。本文将分享iOS函数调用栈的基本概念、符号化过程以及如何利用调用栈进行性能调优。
38 2
|
3月前
|
Web App开发 Java 视频直播
FFmpeg开发笔记(四十九)助您在毕业设计中脱颖而出的几个流行APP
对于软件、计算机等专业的毕业生,毕业设计需实现实用软件或APP。新颖的设计应结合最新技术,如5G时代的音视频技术。示例包括: 1. **短视频分享APP**: 集成FFmpeg实现视频剪辑功能,如添加字幕、转场特效等。 2. **电商购物APP**: 具备直播带货功能,使用RTMP/SRT协议支持流畅直播体验。 3. **同城生活APP**: 引入WebRTC技术实现可信的视频通话功能。这些应用不仅实用,还能展示开发者紧跟技术潮流的能力。
97 4
FFmpeg开发笔记(四十九)助您在毕业设计中脱颖而出的几个流行APP
|
2月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
464 0
|
4月前
|
Web App开发 Android开发
FFmpeg开发笔记(四十六)利用SRT协议构建手机APP的直播Demo
实时数据传输在互联网中至关重要,不仅支持即时通讯如QQ、微信的文字与图片传输,还包括音视频通信。一对一通信常采用WebRTC技术,如《Android Studio开发实战》中的App集成示例;而一对多的在线直播则需部署独立的流媒体服务器,使用如SRT等协议。SRT因其优越的直播质量正逐渐成为主流。本文档概述了SRT协议的使用,包括通过OBS Studio和SRT Streamer进行SRT直播推流的方法,并展示了推流与拉流的成功实例。更多细节参见《FFmpeg开发实战》一书。
79 1
FFmpeg开发笔记(四十六)利用SRT协议构建手机APP的直播Demo
|
4月前
|
消息中间件 Java
【实战揭秘】如何运用Java发布-订阅模式,打造高效响应式天气预报App?
【8月更文挑战第30天】发布-订阅模式是一种消息通信模型,发送者将消息发布到公共队列,接收者自行订阅并处理。此模式降低了对象间的耦合度,使系统更灵活、可扩展。例如,在天气预报应用中,`WeatherEventPublisher` 类作为发布者收集天气数据并通知订阅者(如 `TemperatureDisplay` 和 `HumidityDisplay`),实现组件间的解耦和动态更新。这种方式适用于事件驱动的应用,提高了系统的扩展性和可维护性。
81 2
|
4月前
|
JSON 搜索推荐 定位技术
打造个性化天气应用:iOS开发实战
【8月更文挑战第31天】在这篇文章中,我们将一起探索如何从零开始构建一个iOS天气应用。通过简单易懂的步骤,你将学习到如何使用Swift编程语言和苹果的开发工具Xcode来实现这个目标。我们会涉及到用户界面设计、网络编程以及数据解析等关键技能,确保你能够顺利地完成这个项目。无论你是初学者还是有一定经验的开发者,这篇文章都会带给你新的启发和收获。
|
7月前
|
移动开发 开发工具 数据安全/隐私保护
iOS APP 版本更新升级教程:如何打包上架新的 APP 版本?
iOS APP 版本更新升级教程:如何打包上架新的 APP 版本?
iOS APP 版本更新升级教程:如何打包上架新的 APP 版本?
|
7月前
|
安全 网络安全 数据安全/隐私保护
iOS App的打包和上架流程
iOS App的打包和上架流程