携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第2天,点击查看活动详情。
在本章中,你将学会使用SwiftUI搭建一个每日一句App。
前言
为了更加熟悉和了解SwiftUI
,本系列将从实战角度出发完成100个SwiftUI项目,方便大家更好地学习和掌握SwiftUI
。
这同时也是对自己学习SwiftUI
过程的知识整理。
如有错误,以你为准。
项目搭建
首先,创建一个新的SwiftUI
项目,命名为Sentence
。
逻辑分析
每日一句的逻辑和随机数的逻辑类似,我们预设一堆的句子,然后从句子数组中随机抽出一个句子并展示。
为了让App
更加饱满,我们也可以提供刷新按钮,若呈现的句子用户感触不深,则可以刷新重新请求一次。
页面样式
了解完每日一句的逻辑之后,我们来完成页面样式的设计。
背景颜色
首先是页面的背景颜色,我们可以使用ZStack
填充一个背景颜色,并用edgesIgnoringSafeArea
修饰符将整个颜色拉伸,覆盖包含安全区域的所有位置。示例:
ZStack {
Color(red: 67 / 255, green: 71 / 255, blue: 224 / 255)
.edgesIgnoringSafeArea(.all)
}
复制代码
App标题
App
标题,我们使用Text
文本作为标题样式,示例:
// 标题
func titleView() -> some View {
HStack {
Text("每日一句")
.font(.title)
.fontWeight(.bold)
.foregroundColor(.white)
Spacer()
}
}
复制代码
句子展示
句子展示部分,我们先使用一个句子作为示例,我们使用Text
构建句子样式,我们先声明一个变量存储句子,示例:
@State var sentenceText:String = "外表干净是尊重别人,内心干净是尊重自己,言行干净是尊重灵魂。"
复制代码
然后我们构建句子展示的样式,示例:
// 句子展示
func sentenceView() -> some View {
Text(sentenceText)
.padding()
.foregroundColor(Color(.systemGray))
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 280)
.background(.white)
.cornerRadius(8)
}
复制代码
上述代码中,我们使用Text
构建了一个句子展示区域,我们使用了默认的文字,后面会换成替换的文字。
我们设置了句子的颜色、背景颜色、背景尺寸和圆角,整体样式看起来还不错。
刷新按钮
另外,我们还需要创建一个刷新按钮,供用户获取新的句子。示例:
// 刷新按钮
func refreshBtn() -> some View {
Image(systemName: "repeat.circle.fill")
.font(.system(size: 32))
.foregroundColor(.white)
.padding()
}
复制代码
上述代码中,我们使用Image
和Apple
提供的系统图标做了一个按钮,同样我们调整了它的大小和填充颜色。
整体样式布局
整体样式布局,我们在body
中将已经构建好的元素排布组合,示例:
var body: some View {
ZStack {
Color(red: 67 / 255, green: 71 / 255, blue: 224 / 255)
.edgesIgnoringSafeArea(.all)
VStack {
titleView()
Spacer()
sentenceView()
Spacer()
refreshBtn()
}.padding()
}
}
复制代码
这样,样式部分我们就完成了。
数据部分
数据部分,我们可以使用本地的示例数据,也可以使用网络请求返回Json
数据,这里做简单点,我们使用本地创建的数组,示例:
private var models = [
"你的能力是否能在全世界通用,如果不能,那么需要重新评估你的能力。",
"将自身所学回馈社会,不也是一件幸福的事么。",
"当你作为演讲者时,你要装作自己是最了不起的一个人。而当你作为倾听者时,也请一定要装作自己什么也不懂。",
"当需要你提出建议时,就应该要畅所欲言,不要将想法锁在自己脑子里。",
"一个人若没有深厚的知识积累,就无法轻易说出自己到底喜欢什么。",
"通过沉浸思考,不断积累,就能逐步踏实地将一些知识转变为自己的东西。",
"外表干净是尊重别人,内心干净是尊重自己,言行干净是尊重灵魂。",
"人的精神思想方面的优势越大,给无聊留下的空间就越小。"
]
复制代码
上述代码中,我们声明了一个数组models
,并创建了一些示例的数据。
然后创建一个随机取数的方法来获得随机句子,示例:
// 随机展示句子
func getRandomSentence() {
let index = Int(arc4random() % UInt32(models.count))
sentenceText = models[index]
}
复制代码
最后,在点击刷新按钮时调用上面的方法,示例:
// 刷新按钮
func refreshBtn() -> some View {
Image(systemName: "repeat.circle.fill")
.font(.system(size: 32))
.foregroundColor(.white)
.padding()
.onTapGesture {
getRandomSentence()
}
}
复制代码
完成后,我们预览下项目成果。
项目预览
本章完整代码
import SwiftUI
struct ContentView: View {
@State var sentenceText: String = "外表干净是尊重别人,内心干净是尊重自己,言行干净是尊重灵魂。"
private var models = [
"你的能力是否能在全世界通用,如果不能,那么需要重新评估你的能力。",
"将自身所学回馈社会,不也是一件幸福的事么。",
"当你作为演讲者时,你要装作自己是最了不起的一个人。而当你作为倾听者时,也请一定要装作自己什么也不懂。",
"当需要你提出建议时,就应该要畅所欲言,不要将想法锁在自己脑子里。",
"一个人若没有深厚的知识积累,就无法轻易说出自己到底喜欢什么。",
"通过沉浸思考,不断积累,就能逐步踏实地将一些知识转变为自己的东西。",
"外表干净是尊重别人,内心干净是尊重自己,言行干净是尊重灵魂。",
"人的精神思想方面的优势越大,给无聊留下的空间就越小。",
]
var body: some View {
ZStack {
Color(red: 67 / 255, green: 71 / 255, blue: 224 / 255)
.edgesIgnoringSafeArea(.all)
VStack {
titleView()
Spacer()
sentenceView()
Spacer()
refreshBtn()
}.padding()
}
}
// 标题
func titleView() -> some View {
HStack {
Text("每日一句")
.font(.title)
.fontWeight(.bold)
.foregroundColor(.white)
Spacer()
}
}
// 句子展示
func sentenceView() -> some View {
Text(sentenceText)
.padding()
.foregroundColor(Color(.systemGray))
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: 280)
.background(.white)
.cornerRadius(8)
}
// 刷新按钮
func refreshBtn() -> some View {
Image(systemName: "repeat.circle.fill")
.font(.system(size: 32))
.foregroundColor(.white)
.padding()
.onTapGesture {
getRandomSentence()
}
}
// 随机展示句子
func getRandomSentence() {
let index = Int(arc4random() % UInt32(models.count))
sentenceText = models[index]
}
}
复制代码
不错不错!
如果本专栏对你有帮助,不妨点赞、评论、关注~