0
点赞
收藏
分享

微信扫一扫

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

在本章中,你将学会使用SwiftUI搭建一个每日一句App。

前言

为了更加熟悉和了解​​SwiftUI​​,本系列将从实战角度出发完成100个SwiftUI项目,方便大家更好地学习和掌握​​SwiftUI​​。

这同时也是对自己学习​​SwiftUI​​过程的知识整理。

如有错误,以你为准。

项目搭建

首先,创建一个新的​​SwiftUI​​​项目,命名为​​Sentence​​。

SwiftUI100天:使用SwiftUI搭建一个每日一句App_数据

逻辑分析

每日一句的逻辑和随机数的逻辑类似,我们预设一堆的句子,然后从句子数组中随机抽出一个句子并展示。

为了让​​App​​更加饱满,我们也可以提供刷新按钮,若呈现的句子用户感触不深,则可以刷新重新请求一次。

页面样式

了解完每日一句的逻辑之后,我们来完成页面样式的设计。

SwiftUI100天:使用SwiftUI搭建一个每日一句App_背景颜色_02

背景颜色

首先是页面的背景颜色,我们可以使用​​ZStack​​​填充一个背景颜色,并用​​edgesIgnoringSafeArea​​修饰符将整个颜色拉伸,覆盖包含安全区域的所有位置。示例:

ZStack {
Color(red: 67 / 255, green: 71 / 255, blue: 224 / 255)
.edgesIgnoringSafeArea(.all)
}

SwiftUI100天:使用SwiftUI搭建一个每日一句App_数据_03

App标题

​App​​​标题,我们使用​​Text​​文本作为标题样式,示例:

// 标题
func titleView() -> some View {
HStack {
Text("每日一句")
.font(.title)
.fontWeight(.bold)
.foregroundColor(.white)
Spacer()
}
}

SwiftUI100天:使用SwiftUI搭建一个每日一句App_背景颜色_04

句子展示

句子展示部分,我们先使用一个句子作为示例,我们使用​​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)
}

SwiftUI100天:使用SwiftUI搭建一个每日一句App_数据_05

上述代码中,我们使用​​Text​​构建了一个句子展示区域,我们使用了默认的文字,后面会换成替换的文字。

我们设置了句子的颜色、背景颜色、背景尺寸和圆角,整体样式看起来还不错。

刷新按钮

另外,我们还需要创建一个刷新按钮,供用户获取新的句子。示例:

// 刷新按钮
func refreshBtn() -> some View {
Image(systemName: "repeat.circle.fill")
.font(.system(size: 32))
.foregroundColor(.white)
.padding()
}

SwiftUI100天:使用SwiftUI搭建一个每日一句App_背景颜色_06

上述代码中,我们使用​​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()
}
}

SwiftUI100天:使用SwiftUI搭建一个每日一句App_swift_07

这样,样式部分我们就完成了。

数据部分

数据部分,我们可以使用本地的示例数据,也可以使用网络请求返回​​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()
}
}

完成后,我们预览下项目成果。

项目预览

SwiftUI100天:使用SwiftUI搭建一个每日一句App_SwiftUI_08

本章完整代码

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]

不错不错!

如果本专栏对你有帮助,不妨点赞、评论、关注~

举报

相关推荐

每日一句 代码

0 条评论