前言
为了更加熟悉和了解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] } } 复制代码
不错不错！
