携手创作，共同成长！这是我参与「掘金日新计划 · 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]
}
}
复制代码不错不错！
如果本专栏对你有帮助，不妨点赞、评论、关注～