携手创作，共同成长！这是我参与「掘金日新计划 · 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覆盖一个边框。
这样我们就完成了遥控器的所有样式内容。
项目预览
恭喜你，完成了整个项目的全部内容！
快来动手试试吧。
如果本专栏对你有帮助，不妨点赞、评论、关注～