遥控器老是乱丢，使用SwiftUI搭建一个遥控器App吧～
项目背景
每次在看电视的时候把遥控器随意丢在沙发上，过一会儿总是莫名其妙地找不到了。
打开米家App，里面的遥控器太简约了，无法复原实体遥控器的美观。
于是乎，就想着仿造遥控器外形自己做一个遥控器页面。
说干就干。
项目搭建
首先，创建一个新的SwiftUI项目，命名为RemoteControl。
页面样式
我们来看看小米遥控器的样式，示例：
复用视图
我们发现存在很多相同外观样式的按钮，这里我们可以抽离出相同的结构，以便于简化代码。示例：
// 按钮复用视图 struct imageBtnView: View { var image: String var imageColor: Color var body: some View { Button(action: { }) { Image(systemName: image) .foregroundColor(imageColor) .font(.system(size: 17)) .frame(width: 40, height: 40) .background(Color(red: 66 / 255, green: 66 / 255, blue: 66 / 255)) .clipShape(Circle()) .overlay(Circle().stroke(Color.black, lineWidth: 4)) } } }
上述代码中，我们创建了一个新的视图imageBtnView。
我们声明了2个变量image图片，imageColor图片颜色。然后在body中构建视图样式，我们给Image图片内容引用我们声明好的变量image，图标填充颜色引用我们声明好的变量imageColor。
然后完善了按钮样式，大小17，背景颜色为浅灰色，背景为圆形，最后再覆盖一个圆形的边框。
基础按钮
我们在ContentView视图中使用我们构建的imageBtnView结构体完成样式，示例：
struct ContentView: View { var body: some View { VStack(spacing: 32) { imageBtnView(image: "power", imageColor: .red) imageBtnView(image: "mic", imageColor: .white) HStack(spacing: 32) { imageBtnView(image: "house", imageColor: .white) imageBtnView(image: "arrow.uturn.backward", imageColor: .white) imageBtnView(image: "slider.horizontal.3", imageColor: .white) } Spacer() } .padding() .padding(.top, 40) .frame(maxHeight: .infinity) .background(Color(red: 51 / 255, green: 51 / 255, blue: 51 / 255)) .cornerRadius(16) } }
上述代码中，我们使用之前构建好的结构体imageBtnView很容易地构建了除了遥控器的样式。
我们只需要注意好排列，最后给整个排布好的视图加一个背景颜色和圆角，一个基本的遥控器样式就完成了。
我们看看还少了什么，是的，少了上下左右按钮，以及音量调节按钮。
控制按钮
我们先来构建上下左右控制按钮，示例：
// 上下左右按钮 func mainBtnView() -> some View { Circle() .fill(Color(red: 66 / 255, green: 66 / 255, blue: 66 / 255)) .frame(width: 190, height: 190) .overlay(Circle().stroke(Color.black, lineWidth: 6)) .overlay { Button(action: { }) { Circle() .fill(Color(red: 66 / 255, green: 66 / 255, blue: 66 / 255)) .frame(width: 100, height: 100) .overlay(Circle().stroke(Color.black, lineWidth: 6)) } } }
上述代码中，我们创建了一个新视图mainBtnView。
我们使用Circle圆形，再使用overlay修饰符叠加了一个小一点的Circle圆形，这样我们就完成了上下左右操作按钮。
音量按钮
最后是我们的音量调节按钮，示例：
// 音量按钮 func volumeBtnView() -> some View { VStack(spacing: 100) { Button(action: { }) { Image(systemName: "plus") .font(.system(size: 17)) .foregroundColor(.white) } Button(action: { }) { Image(systemName: "minus") .font(.system(size: 17)) .foregroundColor(.white) } } .padding() .background(Color(red: 66 / 255, green: 66 / 255, blue: 66 / 255)) .cornerRadius(32) .overlay(RoundedRectangle(cornerRadius: 32).stroke(Color.black, lineWidth: 4)) }
上述代码中，我们创建了一个新视图volumeBtnView。
我们使用2个Image图片利用VStack纵向排布，最后使用overlay覆盖一个边框。
这样我们就完成了遥控器的所有样式内容。
项目预览
恭喜你，完成了整个项目的全部内容！
快来动手试试吧。
