不存在“2022年红绿灯新国标”，红灯停，绿灯行，黄灯亮了停一停～
项目背景
近几天一直闹的沸沸扬扬的“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 }
项目预览
恭喜你，完成了本章的全部内容！
快来动手试试吧。
