实战编程·使用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.swift、NewNoteView.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模型类数据,构建数组。

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

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

因此,为了共用页面,我们声明了3个Bool类型的参数isAdd、showNewNoteView、showEditNoteView。

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

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

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

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


相关文章
|
开发框架 数据可视化 Java
iOS开发-SwiftUI简介
iOS开发-SwiftUI简介
777 157
|
iOS开发 开发者 MacOS
深入探索iOS开发中的SwiftUI框架
【10月更文挑战第21天】 本文将带领读者深入了解Apple最新推出的SwiftUI框架,这一革命性的用户界面构建工具为iOS开发者提供了一种声明式、高效且直观的方式来创建复杂的用户界面。通过分析SwiftUI的核心概念、主要特性以及在实际项目中的应用示例,我们将展示如何利用SwiftUI简化UI代码,提高开发效率,并保持应用程序的高性能和响应性。无论你是iOS开发的新手还是有经验的开发者,本文都将为你提供宝贵的见解和实用的指导。
647 66
|
API Android开发 iOS开发
深入探索Android与iOS的多线程编程差异
在移动应用开发领域,多线程编程是提高应用性能和响应性的关键。本文将对比分析Android和iOS两大平台在多线程处理上的不同实现机制,探讨它们各自的优势与局限性,并通过实例展示如何在这两个平台上进行有效的多线程编程。通过深入了解这些差异,开发者可以更好地选择适合自己项目需求的技术和策略,从而优化应用的性能和用户体验。
|
iOS开发 开发者
探索iOS开发中的SwiftUI框架
【10月更文挑战第39天】在苹果的生态系统中,SwiftUI框架以其声明式语法和易用性成为开发者的新宠。本文将深入SwiftUI的核心概念,通过实际案例展示如何利用这一框架快速构建用户界面,并探讨其对iOS应用开发流程的影响。
415 1
|
Swift iOS开发 开发者
探索iOS开发中的SwiftUI框架
【10月更文挑战第21天】在苹果生态系统中,SwiftUI的引入无疑为iOS应用开发带来了革命性的变化。本文将通过深入浅出的方式,带领读者了解SwiftUI的基本概念、核心优势以及如何在实际项目中运用这一框架。我们将从一个简单的例子开始,逐步深入到更复杂的应用场景,让初学者能够快速上手,同时也为有经验的开发者提供一些深度使用的技巧和策略。
395 1
|
Swift iOS开发 UED
揭秘一款iOS应用中令人惊叹的自定义动画效果,带你领略编程艺术的魅力所在!
【9月更文挑战第5天】本文通过具体案例介绍如何在iOS应用中使用Swift与UIKit实现自定义按钮动画,当用户点击按钮时,按钮将从圆形变为椭圆形并从蓝色渐变到绿色,释放后恢复原状。文中详细展示了代码实现过程及动画平滑过渡的技巧,帮助读者提升应用的视觉体验与特色。
469 11
|
前端开发 iOS开发 开发者
探索iOS开发中的SwiftUI框架
【9月更文挑战第21天】在iOS应用开发的广阔天地中,SwiftUI框架如一股清新之风,为开发者带来了声明式语法的便捷与高效。本文将深入探讨SwiftUI的核心概念、布局方式及数据绑定机制,同时通过实例演示如何运用SwiftUI构建用户界面,旨在引领读者领略SwiftUI的魅力,并激发其对iOS开发新趋势的思考与实践。
299 6
|
iOS开发 开发者 UED
探索iOS应用开发中的SwiftUI框架
【9月更文挑战第26天】 在iOS开发的海洋中,SwiftUI犹如一艘现代的快艇,引领着开发者们驶向更加高效与直观的编程体验。本文将带你领略SwiftUI的魅力,从其设计理念到实际应用,我们将一步步揭开它如何简化界面构建过程的面纱。通过对比传统方式,你将看到SwiftUI如何让代码变得像诗一样优美,同时保持强大的功能性和灵活性。准备好让你的iOS开发技能加速升级,一起驾驭这股新潮流吧!
319 1
|
开发框架 前端开发 Android开发
安卓与iOS开发中的跨平台策略
在移动应用开发的战场上,安卓和iOS两大阵营各据一方。随着技术的演进,跨平台开发框架成为开发者的新宠,旨在实现一次编码、多平台部署的梦想。本文将探讨跨平台开发的优势与挑战,并分享实用的开发技巧,帮助开发者在安卓和iOS的世界中游刃有余。
|
iOS开发 开发者
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决
1200 67
uniapp开发ios打包Error code = -5000 Error message: Error: certificate file(p12) import failed!报错问题如何解决

热门文章

最新文章