遥控器老是乱丢，使用SwiftUI搭建一个遥控器App吧～-CFANZ编程社区

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

项目背景

每次在看电视的时候把遥控器随意丢在沙发上，过一会儿总是莫名其妙地找不到了。

打开米家App，里面的遥控器太简约了，无法复原实体遥控器的美观。

于是乎，就想着仿造遥控器外形自己做一个遥控器页面。

说干就干。

项目搭建

首先，创建一个新的SwiftUI项目，命名为RemoteControl。

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

页面样式

我们来看看小米遥控器的样式，示例：

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

复用视图

我们发现存在很多相同外观样式的按钮，这里我们可以抽离出相同的结构，以便于简化代码。示例：

// 按钮复用视图
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)
    }
}

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

上述代码中，我们使用之前构建好的结构体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))
            }
        }
}

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

上述代码中，我们创建了一个新视图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))
}