SwiftUI智能家居开关灯页面搭建示例.docx

第

SwiftUI智能家居开关灯页面搭建示例

目录项目背景项目搭建背景卡片页面标题灯视图开关按钮整体布局项目展示本章代码

项目背景

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

突然大脑里有了一个无聊的灵感，干脆做一个开关灯的App，可以打发无聊的时间。

说干就干。

项目搭建

首先，创建一个新的SwiftUI项目，命名为SmartLight。

背景卡片

首先是背景部分，我们可以使用Rectangle矩形作为背景卡片的设计元素，示例：

//背景卡片

funcbgCard()-someView{

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给矩形加了边距。

页面标题

然后是页面标题部分，我们可以使用Text文字作为页面标题，示例：

//标题

functitleView()-someView{

Text(卧室灯)

.font(.system(size:17))

.fontWeight(.bold)

.padding(.top,40)

.foregroundColor(.white)

上述代码中，我们创建了一个titleView视图。

我们给Text文字设置文字内容为卧室灯，使用font和system修饰符设置文字字号，使用fontWeight修饰符让文字加粗，使用padding边距修饰符让文字距离上边距40，使用foregroundColor修饰符设置文字颜色为白色。

灯视图

对于灯视图，由于我们的灯有开启和关闭两种状态，因此我们首先需要声明一个变量来存储这个状态，示例：

@StatevarisOpen:Bool=false

然后我们可以使用Circle来构建灯的样式，示例：

//灯

funclightView()-someView{

Circle()

.stroke(Color(.systemGray6),lineWidth:80)

.opacity(isOpen0.9:0.5)

.frame(width:20,height:20,alignment:.center)

.shadow(color:.white,radius:isOpen30:0,x:0,y:0)

上述代码中，我们创建了一个lightView视图。

我们使用Circle创建了一个圆，然后使用stroke修饰符给这个圆设置了边框颜色和边框宽度，根据isOpen的状态使用opacity设置透明度，使用frame修饰符设置了灯的大小，使用shadow修饰符设置了灯的阴影颜色和阴影面积。

这里我们根据isOpen的状态和透明度、阴影修饰符的作用，构建了开灯时的样式及关闭时的样式。

开关按钮

然后是开关按钮，我们使用Image图片和Text文字作为开关灯的操作按钮和标识文字，示例：

//开关

funcswitchBtn()-someView{

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(isOp