项目背景
晚上临睡前看着头顶上的卧室灯，圆圆的，点击开灯亮起，再点击关灯熄灭，以此反复。
突然大脑里有了一个无聊的灵感，干脆做一个开关灯的app，可以打发无聊的时间。
说干就干。
项目搭建
首先，创建一个新的swiftui项目，命名为smartlight。
背景卡片
首先是背景部分，我们可以使用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给矩形加了边距。
页面标题
然后是页面标题部分，我们可以使用text文字作为页面标题，示例：
// 标题
func titleview() -> some view {
text("卧室灯")
.font(.system(size: 17))
.fontweight(.bold)
.padding(.top, 40)
.foregroundcolor(.white)
}
上述代码中，我们创建了一个titleview视图。
我们给text文字设置文字内容为卧室灯，使用font和system修饰符设置文字字号，使用fontweight修饰符让文字加粗，使用padding边距修饰符让文字距离上边距40，使用foregroundcolor修饰符设置文字颜色为白色。
灯视图
对于灯视图，由于我们的灯有开启和关闭两种状态，因此我们首先需要声明一个变量来存储这个状态，示例：
@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的状态和透明度、阴影修饰符的作用，构建了开灯时的样式及关闭时的样式。
开关按钮
然后是开关按钮，我们使用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处于关闭状态时，文字提示“点击开灯”。
整体布局
最后我们在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)
}
}
恭喜你，完成了整个项目的全部内容！
以上就是swiftui智能家居开关灯页面搭建示例的详细内容，更多关于swiftui智能家居开关灯页面的资料请关注其它相关文章！
