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

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

标题输入框

其次是标题输入框,输入框使用到TextField输入框组件,我们需要提前使用@State声明好参数,如下代码所示:

@State var title: String
@State var isEditing = false

上述代码中,title变量为标题输入框输入的内容,isEditing变量则是检测当前输入框是否正在输入,用于状态检测和交互使用。

标题输入框的内容样式构建如下:

// MARK: 标题输入框
func titleView() -> some View {
    TextField("请输入标题", text: $title, onEditingChanged: { editingChanged in
        self.isEditing = editingChanged
    })
    .padding()
}

image.png

内容输入框

再次是内容输入框,与标题输入框不同,内容输入框可以输入多行的文字,因此这里使用的是TextEditor多行文本输入框,和TextField输入框组件使用方法类似,首先需要使用@State声明好参数,如下代码所示:

@State var content: String

上述代码中,content变量为TextEditor内容输入框输入的内容,紧接着,内容输入框的内容样式构建如下:

// MARK: 内容输入框
func contentView() -> some View {
    ZStack(alignment: .topLeading) {
        TextEditor(text: $content)
            .font(.system(size: 17))
            .padding()
        if content.isEmpty {
            Text("请输入内容")
                .foregroundColor(Color(UIColor.placeholderText))
                .padding(20)
        }
    }
}

上述代码中,我们创建了一个新的视图contentView内容输入框视图,在这里由于TextEditor多行文本输入框不像TextField输入框组件可以设置提示文字,因此输入开发者自己实现。

我们实现的方法也很简单,使用ZStack层叠容器,当content输入的内容为空的时候,构建展示一个“请输入内容”文字,如此便实现了多行文本框的提示文字效果。

标题输入框titleView和内容输入框contentView的布局方式为纵向布局关系,我们可以使用VStack垂直布局使用,分割线部分可以使用SwiftUI提供的Divider分割线容器。如下代码所示:

NavigationView {
    VStack{
        Divider()
        titleView()
        Divider()
        contentView()
    }
        .navigationBarTitle("新建笔记", displayMode: .inline)
        .navigationBarItems(leading: closeBtnView(), trailing: saveBtnView())
}

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

image.png

交互逻辑

完成了“新建笔记”的页面样式后,我们再来完成基础的页面交互。

关闭弹窗

在ContentView首页我们使用.sheet修饰符触发打开“新建笔记“页面,并使用showNewNoteView触发打开模态弹窗,当showNewNoteView切换为true时,打开“新建笔记”弹窗页面。

这里可以使用@Binding在NewNoteView页面双向绑定showNewNoteView参数,然后当点击“关闭”按钮时,切换showNewNoteView状态。

首先声明showNewNoteView参数,如下代码所示:

@Binding var showNewNoteView: Bool

我们将点击“关闭”按钮时,切换showNewNoteView状态,如下代码所示:

self.showNewNoteView = false

image.png

由于NewNoteView新建笔记页面也在使用PreviewProvider预览,因此在该页面声明的所有没有默认值的变量,都需要创建变量默认值才能进行预览。

完成后,我们还需要回到ContentView首页,对NewNoteView的参数进行双向绑定,如下图所示:

image.png

项目预览

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

image.png

本章小结

由于项目较长,这里将分成几个章节完成,请按耐住性子一步一步完成。

在本章中,我们完成了“新建笔记”页面,首次使用了TextField输入框、TextEditor多行文本输入框,并学会使用@Binding声明可双向绑定的变量,并实现“首页”页面、“新建笔记”页面之间的逻辑交互。

本章内容不多,也不太难,重要的是思维方式。很多时候页面的构建方式都是自上而下,然后逐步拆解的过程,而从代码来看又呈现自下而上构建页面的逻辑。

在编程过程中,每一块内容我们几乎都采用抽离的方式,除了使用func定义View视图的方式,也可以更常用地使用建立子视图的方式创建View视图,因人而异吧。

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

快来动手试试吧~

相关文章
|
2天前
|
JavaScript 前端开发 Android开发
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
34 13
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
4天前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
29 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
4天前
|
JavaScript 搜索推荐 Android开发
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
23 8
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
|
1月前
|
安全 数据安全/隐私保护 Android开发
【05】2025年1月首发完整版-篇幅较长-苹果app如何上架到app store完整流程·不借助第三方上架工具的情况下无需花钱但需仔细学习-优雅草央千澈详解关于APP签名以及分发-们最关心的一篇来了-IOS上架app
【05】2025年1月首发完整版-篇幅较长-苹果app如何上架到app store完整流程·不借助第三方上架工具的情况下无需花钱但需仔细学习-优雅草央千澈详解关于APP签名以及分发-们最关心的一篇来了-IOS上架app
235 75
|
2月前
|
存储 监控 API
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
90 11
|
3月前
|
传感器 iOS开发 UED
探索iOS生态系统:从App Store优化到用户体验提升
本文旨在深入探讨iOS生态系统的多个方面,特别是如何通过App Store优化(ASO)和改进用户体验来提升应用的市场表现。不同于常规摘要仅概述文章内容的方式,我们将直接进入主题,首先介绍ASO的重要性及其对开发者的意义;接着分析当前iOS平台上用户行为的变化趋势以及这些变化如何影响应用程序的设计思路;最后提出几点实用建议帮助开发者更好地适应市场环境,增强自身竞争力。
|
3月前
|
JSON JavaScript 前端开发
harmony-chatroom 自研纯血鸿蒙OS Next 5.0聊天APP实战案例
HarmonyOS-Chat是一个基于纯血鸿蒙OS Next5.0 API12实战开发的聊天应用程序。这个项目使用了ArkUI和ArkTS技术栈,实现了类似微信的消息UI布局、输入框光标处插入文字、emoji表情图片/GIF动图、图片预览、红包、语音/位置UI、长按语音面板等功能。
285 2
|
3月前
|
监控 算法 iOS开发
深入探索iOS函数调用栈:符号化与性能调优实战
在iOS开发中,理解函数调用栈对于性能调优和问题排查至关重要。函数调用栈记录了程序执行过程中的函数调用顺序,通过分析调用栈,我们可以识别性能瓶颈和潜在的代码问题。本文将分享iOS函数调用栈的基本概念、符号化过程以及如何利用调用栈进行性能调优。
54 2
|
4月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
756 0
|
5月前
|
Web App开发 Java 视频直播
FFmpeg开发笔记(四十九)助您在毕业设计中脱颖而出的几个流行APP
对于软件、计算机等专业的毕业生,毕业设计需实现实用软件或APP。新颖的设计应结合最新技术,如5G时代的音视频技术。示例包括: 1. **短视频分享APP**: 集成FFmpeg实现视频剪辑功能,如添加字幕、转场特效等。 2. **电商购物APP**: 具备直播带货功能,使用RTMP/SRT协议支持流畅直播体验。 3. **同城生活APP**: 引入WebRTC技术实现可信的视频通话功能。这些应用不仅实用,还能展示开发者紧跟技术潮流的能力。
107 4
FFmpeg开发笔记(四十九)助您在毕业设计中脱颖而出的几个流行APP

热门文章

最新文章

  • 1
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
  • 2
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
  • 3
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 4
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
  • 5
    【Azure App Service】基于Linux创建的App Service是否可以主动升级内置的Nginx版本呢?
  • 6
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 7
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 8
    【Azure Function】Function App出现System.IO.FileNotFoundException异常
  • 9
    【Azure Logic App】使用MySQL 新增行触发器遇见错误 :“Unknown column 'created_at' in 'order clause'”
  • 10
    阿里云APP备案流程图以及备案所需材料整理,跟着教程一步步操作
  • 1
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    34
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    29
  • 3
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
    23
  • 4
    【Azure Function】Function App门户上的Test/Run返回错误:Failed to fetch
    31
  • 5
    陪玩APP推送配置:陪玩系统手机锁屏收不到推送?可能是这些原因!解决方案来了!
    34
  • 6
    小游戏源码开发之可跨app软件对接是如何设计和开发的
    33
  • 7
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
    135
  • 8
    PiliPala:开源项目真香,B站用户狂喜!这个开源APP竟能自定义主题+去广告?PiliPala隐藏功能大揭秘
    60
  • 9
    语音app系统软件源码开发搭建新手启蒙篇
    44
  • 10
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
    884