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

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

我们至上而下构建页面,首先是搜索栏。从设计稿中,我们可以知道搜索栏由一个搜索图标、搜索输入框、清除按钮组成。由于会使用输入框TextField,因此需要提前声明绑定的变量,如下代码所示:


@State var searchText = ""


// MARK: 搜索
func searchBarView() -> some View {
    TextField("搜索内容", text: $searchText)
        .padding(7)
        .padding(.horizontal, 25)
        .background(Color(.systemGray6))
        .cornerRadius(8)
        .overlay(
            HStack {
                Image(systemName: "magnifyingglass")
                    .foregroundColor(.gray)
                    .frame(minWidth: 0, maxWidth: .infinity, alignment: .leading)
                    .padding(.leading, 8)
                // 编辑时显示清除按钮
                if searchText != "" {
                    Button(action: {
                        self.searchText = ""
                    }) {
                        Image(systemName: "multiply.circle.fill")
                            .foregroundColor(.gray)
                            .padding(.trailing, 8)
                    }
                }
            }
        )
        .padding(.horizontal, 10)
}

上述代码中,我们创建了一个新的搜索栏视图searchBarView

搜索栏使用TextField输入框组件,内容text部分绑定声明好的变量searchText

样式部分使用padding修饰符撑开一段距离,使用background修饰符设置背景填充颜色为灰色,使用cornerRadius修饰符设置视图的圆角度数。

输入框右边有一个“搜索”的图标,这里使用overlay修饰符在输入框层叠一个“搜索”图标和一个“清除”图标按钮。

其中“清除”图标的交互逻辑是,判断输入框内输入的文字searchText是否为空,如果不为空,则展示“清除”按钮,当点击“清除”按钮的时候清空searchText内容。

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

image.png

接下来是列表部分,依旧拆解下列表的元素,列表由记录时间、笔记标题、笔记内容、更多按钮组成,如下图所示:

image.png

拆解好元素后,由于列表不是固定写好的内容,而是由用户编辑输入的内容,因此我们需要构建数据模型。

在Xcode视图窗口右键,选择New File,创建一个新的Swift文件,名称为Model.swift。如下图所示:

image.png

创建完成后,录入以下代码:

import SwiftUI
class NoteItem: ObservableObject, Identifiable {
    var id = UUID()
    @Published var writeTime: String = ""
    @Published var title: String = ""
    @Published var content: String = ""
    // 实例化
    init(writeTime: String, title: String, content: String) {
        self.writeTime = writeTime
        self.title = title
        self.content = content
    }
}

image.png

上述代码中,我们创建了一个类NoteItem,遵循ObservableObject可被观察对象协议和Identifiable可被识别协议。

在NoteItem类里面有三个参数:writeTime录入时间、title标题、content内容。并且在ObservableObject协议需要使用@Published定义,这样才能在参数改变的时候检测到变化。由于使用Identifiable可被识别协议,因此需要声明一个idUUID()

定义好Model数据模型后,回到ContentView文件,我们来创建列表视图,如下代码所示:


// MARK: 列表内容
struct NoteListRow: View {
    @ObservedObject var noteItem: NoteItem
    var body: some View {
        HStack {
            VStack(alignment: .leading, spacing: 10) {
                Text(noteItem.writeTime)
                    .font(.system(size: 14))
                    .foregroundColor(.gray)
                Text(noteItem.title)
                    .font(.system(size: 17))
                    .foregroundColor(.black)
                Text(noteItem.content)
                    .font(.system(size: 14))
                    .foregroundColor(.gray)
                    .lineLimit(1)
                    .multilineTextAlignment(.leading)
            }
            Spacer()
            Button(action: {
            }) {
                Image(systemName: "ellipsis")
                    .foregroundColor(.gray)
                    .font(.system(size: 23))
            }
        }
    }
}

         

上述代码中,我们先创建了一个单条列表视图NoteListRow,使用@ObservedObject引用监听实例对象的类NoteItem

在构建列表视图的样式上,和基础构建视图的方式一致,只是原本固定录入的参数,变成了来自于NoteItem类的参数,示例:标题,使用noteItem.title

三个文本使用VStack纵向布局容器,设置左对齐以及间距为10。最后使用HStack横向布局容器包裹三个文本和“更多”按钮。由于noteItem.content内容文字可能很长,我们只需要一行,因此可以使用lineLimit限制长度为1行省略。

如此,便构建完成了单条笔记的样式。

然后我们基于单条笔记的样式构建列表视图,如下代码所示:

// MARK: 列表
struct NoteListView: View {
    @State var noteItems: [NoteItem] = [NoteItem(writeTime: "2022.09.17", title: "第一条笔记", content: "快来使用念头笔记记录生活吧~快来使用念头笔记记录生活吧~")]
    var body: some View {
        List {
            ForEach(noteItems) { noteItem in
                NoteListRow(noteItem: noteItem)
            }
        }
        .listStyle(InsetListStyle())
    }
}

上述代码中,我们创建了一个NoteListView列表视图,使用@State声明一个数组noteItems,并赋予noteItems来源于NoteItem数组类并赋予内容。

在主体body部分,使用List列表组件和ForEach循环遍历noteItems数组的数据,并传递参数给NoteListRow

List列表样式部分,由于SwiftUI默认样式是圆角矩形分组的方式,这边还需要设置List列表样式为InsetListStyle

我们在ContentView的body中使用搜索栏视图和列表视图,如下代码所示:

NavigationView {
    ZStack {
        VStack {
            searchBarView()
            NoteListView()
        }
        newBtnView()
    }.navigationBarTitle("念头笔记", displayMode: .inline)
}

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

image.png

首页-页面判断

上述编程过程中,我们完成了缺省页和列表页,它们之间的交互逻辑是:当笔记列表中没有笔记时,App将展示缺省页,当存在笔记时,展示列表页。

可以先引入NoteItem数组类,如下代码所示:

@State var noteItems: [NoteItem] = [NoteItem(writeTime: "2022.09.17", title: "第一条笔记", content: "快来使用念头笔记记录生活吧~快来使用念头笔记记录生活吧~")]
然后我们就可以根据noteItems数组的数量作为判断条件,如下代码所示:
scss
复制代码
NavigationView {
    ZStack {
        if noteItems.count == 0 {
            noDataView()
        } else {
            VStack {
                searchBarView()
                NoteListView()
            }
        }
        newBtnView()
    }.navigationBarTitle("念头笔记", displayMode: .inline)
}

上述代码中,当noteItems数组中的数量为0时,则展示noDataView缺省页,否则则展示搜索栏+笔记列表组成的列表页。

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

image.png

本章小结

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

在本章中,我们从产品规划开始,通过需求分析、产品设计、UI设计、实战编程等阶段来从0到1完成一款iOS笔记App,其中涉及到各个阶段不同职业的工作细节,希望能给大家对一款App全生命周期过程有一个大概的认识。

快来动手试试吧~

相关文章
|
9天前
|
安全 数据安全/隐私保护 Android开发
【05】2025年1月首发完整版-篇幅较长-苹果app如何上架到app store完整流程·不借助第三方上架工具的情况下无需花钱但需仔细学习-优雅草央千澈详解关于APP签名以及分发-们最关心的一篇来了-IOS上架app
【05】2025年1月首发完整版-篇幅较长-苹果app如何上架到app store完整流程·不借助第三方上架工具的情况下无需花钱但需仔细学习-优雅草央千澈详解关于APP签名以及分发-们最关心的一篇来了-IOS上架app
132 75
|
1月前
|
iOS开发 开发者 MacOS
深入探索iOS开发中的SwiftUI框架
【10月更文挑战第21天】 本文将带领读者深入了解Apple最新推出的SwiftUI框架,这一革命性的用户界面构建工具为iOS开发者提供了一种声明式、高效且直观的方式来创建复杂的用户界面。通过分析SwiftUI的核心概念、主要特性以及在实际项目中的应用示例,我们将展示如何利用SwiftUI简化UI代码,提高开发效率,并保持应用程序的高性能和响应性。无论你是iOS开发的新手还是有经验的开发者,本文都将为你提供宝贵的见解和实用的指导。
126 66
|
2月前
|
人工智能 自然语言处理 前端开发
用通义灵码,从 0 开始打造一个完整APP,无需编程经验就可以完成
通义灵码携手科技博主@玺哥超carry 打造全网第一个完整的、面向普通人的自然语言编程教程。完全使用 AI,再配合简单易懂的方法,只要你会打字,就能真正做出一个完整的应用。本教程完全免费,而且为大家准备了 100 个降噪蓝牙耳机,送给前 100 个完成的粉丝。获奖的方式非常简单,只要你跟着教程完成第一课的内容就能获得。
11196 17
|
19天前
|
存储 监控 API
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈
|
2月前
|
传感器 iOS开发 UED
探索iOS生态系统:从App Store优化到用户体验提升
本文旨在深入探讨iOS生态系统的多个方面,特别是如何通过App Store优化(ASO)和改进用户体验来提升应用的市场表现。不同于常规摘要仅概述文章内容的方式,我们将直接进入主题,首先介绍ASO的重要性及其对开发者的意义;接着分析当前iOS平台上用户行为的变化趋势以及这些变化如何影响应用程序的设计思路;最后提出几点实用建议帮助开发者更好地适应市场环境,增强自身竞争力。
|
2月前
|
API Android开发 iOS开发
深入探索Android与iOS的多线程编程差异
在移动应用开发领域,多线程编程是提高应用性能和响应性的关键。本文将对比分析Android和iOS两大平台在多线程处理上的不同实现机制,探讨它们各自的优势与局限性,并通过实例展示如何在这两个平台上进行有效的多线程编程。通过深入了解这些差异,开发者可以更好地选择适合自己项目需求的技术和策略,从而优化应用的性能和用户体验。
|
2月前
|
设计模式 Swift iOS开发
探索iOS开发:从基础到高级,打造你的第一款App
【10月更文挑战第40天】在这个数字时代,掌握移动应用开发已成为许多技术爱好者的梦想。本文将带你走进iOS开发的世界,从最基础的概念出发,逐步深入到高级功能实现,最终指导你完成自己的第一款App。无论你是编程新手还是有志于扩展技能的开发者,这篇文章都将为你提供一条清晰的学习路径。让我们一起开始这段旅程吧!
|
2月前
|
iOS开发 开发者
探索iOS开发中的SwiftUI框架
【10月更文挑战第39天】在苹果的生态系统中,SwiftUI框架以其声明式语法和易用性成为开发者的新宠。本文将深入SwiftUI的核心概念,通过实际案例展示如何利用这一框架快速构建用户界面,并探讨其对iOS应用开发流程的影响。
|
存储 安全 测试技术
《iOS取证实战:调查、分析与移动安全》一导读
本书适用于对iPhone和其他iOS设备感兴趣的读者,尤其适合那些对设备中能恢复的存储数据类型感兴趣的读者阅读。
1418 0
|
安全 iOS开发
《iOS取证实战:调查、分析与移动安全》一3.9 参考文献
本节书摘来自华章出版社《iOS取证实战:调查、分析与移动安全》一书中的第3章,第3.9节,作者(美)Andrew Hoog Katie Strzempka,更多章节内容可以访问云栖社区“华章计算机”公众号查看
1078 0

热门文章

最新文章