携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第27天，点击查看活动详情。
项目背景
近几天一直闹的沸沸扬扬的“2022年红绿灯新国标”总算被辟谣了，自小我们所接受的教育是“红灯停，绿灯行，黄灯亮了停一停”，要一下子调整到奇奇怪怪的方式，怕是驾照白考，出门6分300块，哭哭～
刚好有点时间，这里就打算使用SwiftUI实现一个标准的红绿灯的逻辑。
那么，让我们开始吧。
项目搭建
首先，创建一个新的SwiftUI项目，命名为TrafficLight。
我们先来看下最终的效果。
上述设计稿中，我们可以看到红绿灯包括灯光指示部分、灯光控制部分2大部分内容。
当我们调整下方灯光控制开关时，对应的灯光指示将切换至对应样式。
明白了逻辑后，我们来完成基础的样式部分。
App标题
首先是标题部分，我们使用常用的NavigationView构建标题，示例：
var body: some View {
NavigationView {
ZStack {
Color(red: 246 / 255, green: 246 / 255, blue: 246 / 255).edgesIgnoringSafeArea(.all)
}
.NavigationView("红绿灯", displayMode: .inline)
}
}
红绿灯部分
红绿灯灯光部分，由于我们需要通过不同的状态设置灯光，我们先声明好需要的变量，示例：
@State var isAllowTurnLeft: Bool = true
@State var isAllowGoStraight: Bool = true
@State var isAllowTrunRight: Bool = true
@State var isLeftWarning: Bool = false
@State var isGoStraightWarning: Bool = false
@State var isRightWarning: Bool = false
然后我们为了代码简洁和便于修改，我们单独构建3个红绿灯指示样式，示例：
// 左转
func leftLightView(isAllow: Bool, isWarning: Bool) -> some View {
VStack(alignment: .center, spacing: 30) {
Image(systemName: "arrow.backward")
.font(.system(size: 32))
.foregroundColor(isAllow ? .gray : .red)
Image(systemName: "arrow.backward")
.font(.system(size: 32))
.foregroundColor(isWarning ? .yellow : .gray)
Image(systemName: "arrow.backward")
.font(.system(size: 32))
.foregroundColor(isAllow ? .green : .gray)
}
.padding()
.frame(height: 200)
.background(.black)
.cornerRadius(8)
}
// 直行
func goStraightLightView(isAllow: Bool, isWarning: Bool) -> some View {
VStack(alignment: .center, spacing: 15) {
Image(systemName: "circle.fill")
.font(.system(size: 32))
.foregroundColor(isAllow ? .gray : .red)
Image(systemName: "circle.fill")
.font(.system(size: 32))
.foregroundColor(isWarning ? .yellow : .gray)
Image(systemName: "circle.fill")
.font(.system(size: 32))
.foregroundColor(isAllow ? .green : .gray)
}
.padding()
.frame(height: 200)
.background(.black)
.cornerRadius(8)
}
// 右转
func rightLightView(isAllow: Bool, isWarning: Bool) -> some View {
VStack(alignment: .center, spacing: 30) {
Image(systemName: "arrow.forward")
.font(.system(size: 32))
.foregroundColor(isAllow ? .gray : .red)
Image(systemName: "arrow.forward")
.font(.system(size: 32))
.foregroundColor(isWarning ? .yellow : .gray)
Image(systemName: "arrow.forward")
.font(.system(size: 32))
.foregroundColor(isAllow ? .green : .gray)
}
.padding()
.frame(height: 200)
.background(.black)
.cornerRadius(8)
}
上述代码中，我们分别构建了红绿灯指示灯的视图：leftLightView左转视图、goStraightLightView直行视图、rightLightView右转视图。
然后通过传入变量isAllow判断该方向是否运行，并且根据isAllow变量、isWarning变量，设置对应灯光图片是否赋于颜色。
然后我们在body主体视图展示视图，示例：
VStack {
// 红绿灯
HStack(spacing: 20) {
leftLightView(isAllow: isAllowTurnLeft, isWarning: isLeftWarning)
goStraightLightView(isAllow: isAllowGoStraight, isWarning: isGoStraightWarning)
rightLightView(isAllow: isAllowTrunRight, isWarning: isRightWarning)
}.padding()
}
上述代码中，我们使用HStack横向布局，让三个灯光视图横向展示，并且传入的变量都绑定好我们提前声明好的变量。
规则设置部分
规则设置部分，我们也单独建立一个新的视图，示例：
// 规则列表
func ruleListView() -> some View {
Form {
Section {
Toggle(isOn: $isAllowTurnLeft) {
VStack(alignment: .leading, spacing: 5) {
Text("左转")
.font(.system(size: 17))
.foregroundColor(.black)
Text(isAllowTurnLeft ?"左转通行" : "禁止左转")
.font(.system(size: 14))
.foregroundColor(.gray)
}
}
Toggle(isOn: $isAllowGoStraight) {
VStack(alignment: .leading, spacing: 5) {
Text("直行")
.font(.system(size: 17))
.foregroundColor(.black)
Text(isAllowGoStraight ? "直行通行" : "禁止直行")
.font(.system(size: 14))
.foregroundColor(.gray)
}
}
Toggle(isOn: $isAllowTrunRight) {
VStack(alignment: .leading, spacing: 5) {
Text("右转")
.font(.system(size: 17))
.foregroundColor(.black)
Text(isAllowTrunRight ? "右转通行" : "禁止右转")
.font(.system(size: 14))
.foregroundColor(.gray)
}
}
}.padding(.vertical, 5)
}
}
上述代码中，我们使用Form列表和Section段落构建了规则设置视图ruleListView。
在规则设置视图中，我们使用Toggle开关绑定对应的变量，并使用提前声明好的变量状态绑定展示不同的辅助文字。
另外为了去掉Form自带的列表背景颜色，我们还需要在页面载入时去掉List的背景颜色，示例：
init() {
UITableView.appearance().backgroundColor = .clear
}
项目预览
恭喜你，完成了本章的全部内容！
快来动手试试吧。
如果本专栏对你有帮助，不妨点赞、评论、关注～
