遥控器老是乱丢，使用SwiftUI搭建一个遥控器App吧～

携手创造，共同生长！这是我参与「日新方案 8 月更文应战」的第15天，点击检查活动详情。

在本章中，你将学会运用SwiftUI建立一个小米遥控器页面。

项目布景

每次在看电视的时候把遥控器随意丢在沙发上，过一瞬间总是不可思议地找不到了。

打开米家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掩盖一个边框。

这样咱们就完成了遥控器的一切款式内容。

项目预览

恭喜你，完成了整个项目的全部内容！

快来动手试试吧。

如果本专栏对你有协助，不妨点赞、评论、重视～