携手创作,一起生长!这是我参与「日新方案 8 月更文挑战」的第6天,点击检查活动详情。

在本章中,你将学会运用SwiftUI搭建一个开关灯App

项目布景

晚上临睡前看着头顶上的卧室灯,圆圆的,点击开灯亮起,再点击关灯平息,以此反复。

忽然大脑里有了一个无聊的灵感,干脆做一个开关灯的App,能够打发无聊的时间。

说干就干。

项目搭建

首要,创建一个新的SwiftUI项目,命名为SmartLight

使用SwiftUI搭建一个智能家居的开关灯页面,我是有多无聊~

布景卡片

首要是布景部分,咱们能够运用Rectangle矩形作为布景卡片的设计元素,示例:

// 布景卡片
func bgCard() -> some View {
Rectangle()
.foregroundColor(Color(red: 88 / 255, green: 132 / 255, blue: 234 / 255))
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
.cornerRadius(16)
.shadow(radius: 2)
.padding()
}

上述代码中,咱们创建了一个bgCard视图。

咱们给Rectangle矩形增加了布景色彩foregroundColor修饰符,运用frame尺度修饰符设置了矩形的巨细,运用cornerRadius修饰符设置了矩形的圆角,运用shadow修饰符设置了矩形的暗影,最终运用了padding给矩形加了边距。

使用SwiftUI搭建一个智能家居的开关灯页面,我是有多无聊~

页面标题

然后是页面标题部分,咱们能够运用Text文字作为页面标题,示例:

// 标题
func titleView() -> some View {
Text("卧室灯")
.font(.system(size: 17))
.fontWeight(.bold)
.padding(.top, 40)
.foregroundColor(.white)
}

上述代码中,咱们创建了一个titleView视图。

咱们给Text文字设置文字内容为卧室灯,运用fontsystem修饰符设置文字字号,运用fontWeight修饰符让文字加粗,运用padding边距修饰符让文字间隔上边距40,运用foregroundColor修饰符设置文字色彩为白色

使用SwiftUI搭建一个智能家居的开关灯页面,我是有多无聊~

灯视图

关于灯视图,由于咱们的灯有敞开封闭两种状况,因而咱们首要需求声明一个变量存储这个状况,示例:

@State var isOpen: Bool = false

然后咱们能够运用Circle来构建灯的样式,示例:

// 灯
func lightView() -> some View {
Circle()
.stroke(Color(.systemGray6), lineWidth: 80)
.opacity(isOpen ? 0.9 : 0.5)
.frame(width: 20, height: 20, alignment: .center)
.shadow(color: .white, radius: isOpen ? 30 : 0, x: 0, y: 0)
}

上述代码中,咱们创建了一个lightView视图。

咱们运用Circle创建了一个圆,然后运用stroke修饰符给这个圆设置了边框色彩和边框宽度,依据isOpen的状况运用opacity设置透明度,运用frame修饰符设置了灯的巨细,运用shadow修饰符设置了灯的暗影色彩和暗影面积。

这儿咱们依据isOpen的状况和透明度、暗影修饰符的效果,构建了开灯时的样式及封闭时的样式。

使用SwiftUI搭建一个智能家居的开关灯页面,我是有多无聊~

开关按钮

然后是开关按钮,咱们运用Image图片和Text文字作为开关灯的操作按钮和标识文字,示例:

// 开关
func switchBtn() -> some View {
VStack(spacing: 20) {
Image(systemName: "power")
.foregroundColor(isOpen ? .white : .black)
.font(.system(size: 32))
.onTapGesture {
self.isOpen.toggle()
}
Text(isOpen ? "点击关灯" : "点击开灯")
.font(.system(size: 17))
.fontWeight(.bold)
.foregroundColor(isOpen ? .white : .black)
}.padding(.bottom, 80)
}

上述代码中,咱们创建了一个switchBtn视图。

咱们运用VStack笔直排布的方法布置操作按钮和文字,操作按钮部分,咱们运用Image构建按钮,运用Apple供给的体系图标。

依据isOpen的状况运用foregroundColor修饰符设置按钮色彩,敞开时为白色,封闭时为黑色。运用font修饰符设置按钮巨细,运用onTapGesture修饰符给图标添加点击的交互动作,当点击图标时,isOpen的状况被切换。

文字部分就有个小逻辑,即当isOpen敞开的时分,文字应该提示“点击关灯”,而当isOpen处于封闭状况时,文字提示“点击开灯”。

使用SwiftUI搭建一个智能家居的开关灯页面,我是有多无聊~

全体布局

最终咱们在body视图中进行一切视图的布局,示例:

var body: some View {
ZStack {
bgCard()
VStack {
titleView()
Spacer()
lightView()
Spacer()
Spacer()
switchBtn()
}
}
}

项目展示

本章代码

import SwiftUI
struct ContentView: View {
@State var isOpen: Bool = false
var body: some View {
ZStack {
bgCard()
VStack {
titleView()
Spacer()
lightView()
Spacer()
Spacer()
switchBtn()
}
}
}
// 布景卡片
func bgCard() -> some View {
Rectangle()
.foregroundColor(Color(red: 88 / 255, green: 132 / 255, blue: 234 / 255))
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
.cornerRadius(16)
.shadow(radius: 2)
.padding()
}
// 标题
func titleView() -> some View {
Text("卧室灯")
.font(.system(size: 17))
.fontWeight(.bold)
.padding(.top, 40)
.foregroundColor(.white)
}
// 灯
func lightView() -> some View {
Circle()
.stroke(Color(.systemGray6), lineWidth: 80)
.opacity(isOpen ? 0.9 : 0.5)
.frame(width: 20, height: 20, alignment: .center)
.shadow(color: .white, radius: isOpen ? 30 : 0, x: 0, y: 0)
}
// 开关
func switchBtn() -> some View {
VStack(spacing: 20) {
Image(systemName: "power")
.foregroundColor(isOpen ? .white : .black)
.font(.system(size: 32))
.onTapGesture {
self.isOpen.toggle()
}
Text(isOpen ? "点击关灯" : "点击开灯")
.font(.system(size: 17))
.fontWeight(.bold)
.foregroundColor(isOpen ? .white : .black)
}.padding(.bottom, 80)
}
}

恭喜你,完成了整个项目的全部内容!

快来着手试试吧。

如果本专栏对你有协助,不妨点赞、谈论、重视~