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

4,398 阅读7分钟

前提回顾

在上两章节中,我们完成了念头笔记首页新建笔记页面的页面构建,以及两个页面之间的简单交互。单独从前端角度来看,静态项目已经搭建完毕,接下来我们要进入到更加深层次一点点的学习。

在本章中,我们将实现继续实现念头笔记的新建一条笔记的交互。

新建笔记

我们先来完成新建笔记的操作,在之前的章节里我们创建了一个类NoteItem来作为Model数据用来遍历列表数据,而新建笔记的方法也很简单,我们只需要在NoteItem类数组中插入一条数据,并且插入的数据信息是我们标题输入框以及内容输入框输入的数据就行了。

首先需要在NewNoteView视图中,创建用于双向绑定的NoteItem类数组,如下代码所示:

@Binding var noteItems: [NoteItem]

因为使用@Binding进行双向绑定,在NewNoteView视图预览时需要加一个默认值,如下代码所示:

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新建笔记视图的新建笔记参数没有能回传回来

是的,这里埋了一个坑。

@Binding属性包装器

这里科普下@State@Binding的用法,@State属性包装器常常用于声明变量的前缀,使用@State属性包装器声明的变量,可以存储当前参数的状态或者值,而@Binding属性包装器常常在其他页面反向绑定@State属性包装器声明的变量。

比如,在首页声明的打开弹窗的参数showNewNoteView,在首页切换showNewNoteView状态用于打开弹窗,因此需要存储其状态

而在新建笔记页面需要关闭弹窗,而开启和关闭弹窗的参数在首页中,于是需要使用@Binding属性包装器进行两个页面之间的双向绑定。

于是使用@Binding声明的showNewNoteView参数在新建笔记切换其状态,在首页中@State声明绑定的同一个参数就可以实时监听更新其状态,就实现了关闭弹窗的交互。

好了,回归主题,我们这里需要修改的将NoteListView笔记列表视图的NoteItem模型类数组使用@Binding进行双向绑定,并在ContentView首页视图中进行绑定,如下代码所示:

@Binding var noteItems: [NoteItem]

运行预览效果如下图所示:

QQ20220920-211222-HD.gif

提示信息

新建笔记时,当“新建笔记”页面标题输入框为空,以及“内容输入框”为空时,点击“完成”按钮,应用会创建一条空白的笔记,如下图所示:

这不是我们想要的结果。

新建笔记页面标题、内容输入框都必须输入内容,方可点击创建一条新笔记,当不满足此条件时,则需要提示用户相应的内容,告知用户需要填写和输入。

在移动端常见的方式是使用Toast冒泡提示,我们可以使用ViewModifier协议创建一个Toast视图,首先创建一个新的Swift文件,命名为ToastView

然后录入下面的代码:

import SwiftUI

struct ToastViewModifier: ViewModifier {
    @Binding var present: Bool
    @Binding var message: String
    var alignment: Alignment = .center

    func body(content: Content) -> some View {
        ZStack {
            content
                .zIndex(0)
            VStack {
                Text(message)
                    .padding(Edge.Set.horizontal, 20)
                    .padding(Edge.Set.vertical, 10)
                    .multilineTextAlignment(.center)
                    .foregroundColor(.white)
                    .background(Color.black.opacity(0.7))
                    .cornerRadius(5)
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity, alignment: alignment)
            .background(Color.gray.opacity(0.1))
            .opacity(present ? 1 : 0)
            .zIndex(1)
            .onChange(of: present) { value in
                if value {
                    // 延迟2秒消失
                    DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
                        present.toggle()
                    }
                }
            }
        }
    }
}

extension View {
    func toast(present: Binding<Bool>, message: Binding<String>, alignment: Alignment = .center) -> some View {
        modifier(ToastViewModifier(present: present, message: message, alignment: alignment))
    }
}

上述代码中,我们实现了一个Toast冒泡提示的样式,详细说明见【Swift实用小册19:ExtenExtension扩展的使用】。

回到NewNoteView新建笔记视图,我们先声明Toast需要的参数,如下代码所示:

@State var showToast = false
@State var showToastMessage: String = ""

上述代码中,showToast参数触发是否展示Toast,showToastMessage参数则显示Toast的内容。调用Toast的方法如下代码所示:

.toast(present: $showToast, message: $showToastMessage, alignment: .center)

回到逻辑部分,我们需要判断输入的标题title、内容content是否为空,若为空,则展示相应的内容,我们可以写一个方法判读输入内容是否为空,如下代码所示:

// MARK: 判断输入是否为空

func isNull(text: String) -> Bool {
    if text == "" {
        return true
    }
    return false
}

上述代码中,我们创建了一个判断输入的文字是否为空的方法isNull,传入一个String类型的文字,通过判断是否为空,对应返回Bool

我们在点击“完成”按钮时,调用判断方法,如下代码所示:

if isNull(text: title) {
	self.showToastMessage = "请输入标题"
	self.showToast = true

} else if isNull(text: content) {
	self.showToastMessage = "请输入内容"
	self.showToast = true
} else {
	addNote(writeTime: getCurrentTime(), title: title, content: content)
	self.showNewNoteView = false
}

本章项目预览

完成后,我们回到ContentView首页,运行预览效果如下图所示:

QQ20220920-231325-HD.gif

本章小结

在本章中,我们实现了新建笔记的方法,当然也传达了一个很重要的编程理念,也就是结构化编程

无论是View视图,还是实现某种功能的方法,我们编程的方式都是抽离出来单独构建。这样编程的好处是当我们需要修改某块内容样式或者逻辑时,可以快速定位到相关的内容,并且尽量使得视图、方法松散分离,变成一块一块的代码块,便于后期扩充

这也是我喜欢SwiftUI的地方,也是喜欢写代码的原因。

接下来的章节,我们将继续完成交互逻辑部分,请保持期待吧~

版权声明

本文为稀土掘金技术社区首发签约文章,14天内禁止转载,14天后未获授权禁止转载,侵权必究!