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

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

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


前提回顾

在上一章节中,我们从需求分析出发,经历产品原型设计、产品UI设计,到笔记App首页的实战编程开发,走出了从0到1完成一款iOS笔记应用的第一步。

下面,我们将继续完成笔记App的其他部分内容。

笔记App按照页面来划分,可以分为首页、新建笔记页面,在上一章我们完成了首页的编程,这一章节我们来看看“新建笔记”页面。如下图所示:

image.png

我们可以看到“新建笔记”页面和“首页”是层叠关系,即“新建笔记”页面是在首页的基础上,由下而上展开的弹窗。这种产品设计方式在之前的章节我们提及过,是一种中度提醒操作,用户的主观感受还放在首页上,基于首页编辑内容的一种交互形式。

在SwiftUI编程中,此类弹窗统称为ModelView模态弹窗。

模态弹窗

模态弹窗,是一种以临时出现的形式显示内容,需要明确的操作才能退出的弹窗。其主要目的有2个,一是帮助用户专注于一个独立任务或一组相关选项。二是确保用户接收到重要信息,并在必要时确保操作正确。

我们来设计简单的模态弹窗,模态弹窗需要有两个页面作为交互基点,我们先创建一个新的SwiftUI页面,命名为NewNoteView。如下图所示:

image.png

创建完成后,回到ContentView,定义模态弹窗的触发条件,通常使用Bool值作为触发条件,如下代码所示:


@State var showNewNoteView = false

模态弹窗的跳转需要使用到使用.sheet修饰符,绑定声明好的Bool值变量,如下代码所示:

NavigationView {
  ZStack {
    if noteItems.count == 0 {
      noDataView()
    } else {
      VStack {
        searchBarView()
        NoteListView()
      }
    }
    newBtnView()
  }
  .navigationBarTitle("念头笔记", displayMode: .inline)
}.sheet(isPresented: $showNewNoteView) {
            NewNoteView()
}

image.png

上述代码中,我们将.sheet修饰符修饰整个NavigationView包裹的首页视图,isPresented模态弹窗的触发动作绑定声明好的变量showNewNoteView,跳转的页面为新创建的NewNoteView

最后是跳转的动作,当用户点击“新建笔记”按钮时,切换showNewNoteView以触发打开模态弹窗的动作,如下代码所示:

self.showNewNoteView = true

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

image.png

新建笔记页面

来到NewNoteView页面,我们来完成“新建笔记”页面的相关样式内容,依旧是从上至下拆解页面元素,如下图所示:

image.png

“新建笔记”页面有顶部导航栏、标题输入框、内容输入框三块要素组成。

顶部导航栏

首先是顶部导航栏,顶栏由“关闭”按钮,“新建笔记”标题,“完成”按钮组成,标题我们可以使用NavigationView构建,如下代码所示:


NavigationView {
  Text("Hello, World!")
    .navigationBarTitle("新建笔记",displayMode: .inline)
}

image.png

按钮部分,我们可以单独构建按钮的样式,如下代码所示:


// MARK: 关闭按钮
func closeBtnView() -> some View {
    Button(action: {
    }) {
        Image(systemName: "xmark.circle.fill")
            .font(.system(size: 17))
            .foregroundColor(.gray)
    }
}
// MARK: 完成按钮
func saveBtnView() -> some View {
    Button(action: {
    }) {
        Text("完成")
            .font(.system(size: 17))
    }
}

下一步,我们只需要将这两个按钮加到NavigationView顶部导航上就可以了,这里使用到的修饰符是navigationBarItems,如下代码所示:

NavigationView {
    Text("Hello, World!")
        .navigationBarTitle("新建笔记", displayMode: .inline)
        .navigationBarItems(leading:closeBtnView(),trailing: saveBtnView())
}


相关文章
|
3天前
|
监控 算法 iOS开发
深入探索iOS函数调用栈:符号化与性能调优实战
在iOS开发中,理解函数调用栈对于性能调优和问题排查至关重要。函数调用栈记录了程序执行过程中的函数调用顺序,通过分析调用栈,我们可以识别性能瓶颈和潜在的代码问题。本文将分享iOS函数调用栈的基本概念、符号化过程以及如何利用调用栈进行性能调优。
20 2
|
2月前
|
Web App开发 Java 视频直播
FFmpeg开发笔记(四十九)助您在毕业设计中脱颖而出的几个流行APP
对于软件、计算机等专业的毕业生,毕业设计需实现实用软件或APP。新颖的设计应结合最新技术,如5G时代的音视频技术。示例包括: 1. **短视频分享APP**: 集成FFmpeg实现视频剪辑功能,如添加字幕、转场特效等。 2. **电商购物APP**: 具备直播带货功能,使用RTMP/SRT协议支持流畅直播体验。 3. **同城生活APP**: 引入WebRTC技术实现可信的视频通话功能。这些应用不仅实用,还能展示开发者紧跟技术潮流的能力。
81 4
FFmpeg开发笔记(四十九)助您在毕业设计中脱颖而出的几个流行APP
|
3月前
|
Web App开发 Android开发
FFmpeg开发笔记(四十六)利用SRT协议构建手机APP的直播Demo
实时数据传输在互联网中至关重要,不仅支持即时通讯如QQ、微信的文字与图片传输,还包括音视频通信。一对一通信常采用WebRTC技术,如《Android Studio开发实战》中的App集成示例;而一对多的在线直播则需部署独立的流媒体服务器,使用如SRT等协议。SRT因其优越的直播质量正逐渐成为主流。本文档概述了SRT协议的使用,包括通过OBS Studio和SRT Streamer进行SRT直播推流的方法,并展示了推流与拉流的成功实例。更多细节参见《FFmpeg开发实战》一书。
57 1
FFmpeg开发笔记(四十六)利用SRT协议构建手机APP的直播Demo
|
3月前
|
Web App开发 5G Linux
FFmpeg开发笔记(四十四)毕业设计可做的几个拉满颜值的音视频APP
一年一度的毕业季来临,计算机专业的毕业设计尤为重要,不仅关乎学业评价还积累实战经验。选择紧跟5G技术趋势的音视频APP作为课题极具吸引力。这里推荐三类应用:一是融合WebRTC技术实现视频通话的即时通信APP;二是具备在线直播功能的短视频分享平台,涉及RTMP/SRT等直播技术;三是具有自定义动画特效及卡拉OK歌词字幕功能的视频剪辑工具。这些项目不仅技术含量高,也符合市场需求,是毕业设计的理想选择。
76 6
FFmpeg开发笔记(四十四)毕业设计可做的几个拉满颜值的音视频APP
|
3月前
|
编解码 Java Android开发
FFmpeg开发笔记(四十五)使用SRT Streamer开启APP直播推流
​SRT Streamer是一个安卓手机端的开源SRT协议直播推流框架,可用于RTMP直播和SRT直播。SRT Streamer支持的视频编码包括H264、H265等等,支持的音频编码包括AAC、OPUS等等,可谓功能强大的APP直播框架。另一款APP直播框架RTMP Streamer支持RTMP直播和RTSP直播,不支持SRT协议的直播。而本文讲述的SRT Streamer支持RTMP直播和SRT直播,不支持RTSP协议的直播。有关RTMP Streamer的说明参见之前的文章《使用RTMP Streamer开启APP直播推流》,下面介绍如何使用SRT Streamer开启手机直播。
69 4
FFmpeg开发笔记(四十五)使用SRT Streamer开启APP直播推流
|
3月前
|
编解码 iOS开发
IOS上架APP Store时预览图尺寸
IOS上架APP Store时预览图尺寸
549 3
|
3月前
|
iOS开发
App备案与iOS云管理式证书 ,公钥及证书SHA-1指纹的获取方法
App备案与iOS云管理式证书 ,公钥及证书SHA-1指纹的获取方法
177 0
App备案与iOS云管理式证书 ,公钥及证书SHA-1指纹的获取方法
|
3月前
|
开发工具 iOS开发
解决Flutter运行报错Could not run build/ios/iphoneos/Runner.app
解决Flutter运行报错Could not run build/ios/iphoneos/Runner.app
135 2
|
3月前
|
Android开发 iOS开发 C#
Xamarin:用C#打造跨平台移动应用的终极利器——从零开始构建你的第一个iOS与Android通用App,体验前所未有的高效与便捷开发之旅
【8月更文挑战第31天】Xamarin 是一个强大的框架,允许开发者使用单一的 C# 代码库构建高性能的原生移动应用,支持 iOS、Android 和 Windows 平台。作为微软的一部分,Xamarin 充分利用了 .NET 框架的强大功能,提供了丰富的 API 和工具集,简化了跨平台移动应用开发。本文通过一个简单的示例应用介绍了如何使用 Xamarin.Forms 快速创建跨平台应用,包括设置开发环境、定义用户界面和实现按钮点击事件处理逻辑。这个示例展示了 Xamarin.Forms 的基本功能,帮助开发者提高开发效率并实现一致的用户体验。
147 0
|
3月前
|
JSON 搜索推荐 定位技术
打造个性化天气应用:iOS开发实战
【8月更文挑战第31天】在这篇文章中,我们将一起探索如何从零开始构建一个iOS天气应用。通过简单易懂的步骤,你将学习到如何使用Swift编程语言和苹果的开发工具Xcode来实现这个目标。我们会涉及到用户界面设计、网络编程以及数据解析等关键技能,确保你能够顺利地完成这个项目。无论你是初学者还是有一定经验的开发者,这篇文章都会带给你新的启发和收获。
下一篇
无影云桌面