实战编程·使用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视图,因人而异吧。

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

快来动手试试吧~

相关文章
|
5天前
|
运维 iOS开发 Windows
windows电脑备案ios APP获取公钥和证书指纹Sha-1值的方法
在阿里云进行APP备案、在备案IOS端的环节的时候,发现需要我们将p12证书安装在电脑上,再用xcode或或钥匙串访问来获取这个证书的公钥和sha-1值。 但是大部分开发uniapp应用的同学们,或者进行发布的运维人员的电脑都是windows,无法按照阿里云的教程来获取ios的公钥和sha-1。备案就被卡主了。 这里介绍下另一个方法,就是使用香蕉云编来在线上传证书获取。如下图所示,打开香蕉云编后,找到下图这个功能
95 0
|
7月前
|
JavaScript 前端开发 Android开发
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
216 13
【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
2月前
|
缓存 小程序 视频直播
基于uni-app+vite5+vue3实战短视频+直播+聊天app应用
基于uniapp+vue3+vite5从0-1实战搭建仿抖音/微信直播带货商城。集短视频+聊天+直播功能于一体。实现全屏沉浸式切换短视频/直播,支持编译运行到h5+小程序端+app端。
237 4
|
2月前
|
存储 移动开发 监控
App Trace功能实战:一键拉起、快速安装与免提写邀请码的应用实践
App Trace系统通过一键拉起、快速安装和免提写邀请码三大功能,显著提升用户转化率、安装成功率和邀请注册率。结合深度技术实现与优化,助力公司用户增长,成为移动端核心基础设施。
|
6月前
|
Swift iOS开发 开发者
苹果app上架-ios上架苹果商店app store 之苹果支付In - App Purchase内购配置-优雅草卓伊凡
苹果app上架-ios上架苹果商店app store 之苹果支付In - App Purchase内购配置-优雅草卓伊凡
628 13
苹果app上架-ios上架苹果商店app store 之苹果支付In - App Purchase内购配置-优雅草卓伊凡
|
6月前
|
存储 数据安全/隐私保护 开发者
苹果app上架app store 之苹果开发者账户在mac电脑上如何使用钥匙串访问-发行-APP发布证书ios_distribution.cer-优雅草卓伊凡
苹果app上架app store 之苹果开发者账户在mac电脑上如何使用钥匙串访问-发行-APP发布证书ios_distribution.cer-优雅草卓伊凡
225 8
苹果app上架app store 之苹果开发者账户在mac电脑上如何使用钥匙串访问-发行-APP发布证书ios_distribution.cer-优雅草卓伊凡
|
8月前
|
安全 数据安全/隐私保护 Android开发
【05】2025年1月首发完整版-篇幅较长-苹果app如何上架到app store完整流程·不借助第三方上架工具的情况下无需花钱但需仔细学习-优雅草央千澈详解关于APP签名以及分发-们最关心的一篇来了-IOS上架app
【05】2025年1月首发完整版-篇幅较长-苹果app如何上架到app store完整流程·不借助第三方上架工具的情况下无需花钱但需仔细学习-优雅草央千澈详解关于APP签名以及分发-们最关心的一篇来了-IOS上架app
1039 75
|
7月前
|
JavaScript 搜索推荐 Android开发
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
227 8
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
|
7月前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
230 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
9月前
|
iOS开发 开发者 MacOS
深入探索iOS开发中的SwiftUI框架
【10月更文挑战第21天】 本文将带领读者深入了解Apple最新推出的SwiftUI框架,这一革命性的用户界面构建工具为iOS开发者提供了一种声明式、高效且直观的方式来创建复杂的用户界面。通过分析SwiftUI的核心概念、主要特性以及在实际项目中的应用示例,我们将展示如何利用SwiftUI简化UI代码,提高开发效率,并保持应用程序的高性能和响应性。无论你是iOS开发的新手还是有经验的开发者,本文都将为你提供宝贵的见解和实用的指导。
285 66