携手创作，共同成长！这是我参加「日新方案 · 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
}
项目预览
祝贺你，完成了本章的全部内容！
快来着手试试吧。
假如本专栏对你有协助，不妨点赞、评论、重视～
