SwiftUI100天：使用SwiftUI搭建一个每日一句App

携手创作，一起生长！这是我参与「日新计划 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]
}
}

不错不错！

假如本专栏对你有协助，不妨点赞、谈论、关注～