项目背景
无意中在刷B站的时候，看到一些很温馨的颜色搭配，让人充满灵感。
以前就很喜欢使用纯色背景，经常会用纯色背景图片作为壁纸。
那么本章中，我们就尝试使用SwiftUI搭建一个纯色背景App。
项目搭建
首先，创建一个新的SwiftUI项目，命名为SolidColor。
模型搭建
首先，我们先创建一个数据模型，我们命名为Model。
struct Model:Identifiable { var id:UUID var color:Color var colorName:String var colorRGBName:String } 复制代码
上述代码中，我们创建了一个Model结构体，遵循Identifiable协议。
Identifiable协议可以帮助我们定位到数据源的id，当我们的示例数据存在2条或者多条一模一样的数据时，会展示多条而不是合并为一条。
然后我们声明了几个变量：id作为唯一标识符，color为背景颜色，colorName为颜色名称，colorRGBName为对应颜色的RGB颜色值名称。
完成后，我们来创建一些示例数据，示例：
var models = [ Model(colorName: "草莓红", color: Color(red: 228/255, green: 45/255, blue: 68/255), colorRGBName: "#E42D44"), Model(colorName: "奶油白", color: Color(red: 250/255, green: 239/255, blue: 222/255), colorRGBName: "#FAEFDE"), Model(colorName: "泥猴桃绿", color: Color(red: 123/255, green: 173/255, blue: 95/255), colorRGBName: "#7BAD5F"), Model(colorName: "小麦黄", color: Color(red: 229/255, green: 215/255, blue: 173/255), colorRGBName: "#E5D7AD"), Model(colorName: "板栗灰", color: Color(red: 97/255, green: 79/255, blue: 77/255), colorRGBName: "#614F4D"), Model(colorName: "柠檬黄", color: Color(red: 255/255, green: 216/255, blue: 0/255), colorRGBName: "#FFD800"), Model(colorName: "葡萄紫", color: Color(red: 91/255, green: 52/255, blue: 99/255), colorRGBName: "#5B3663"), Model(colorName: "青豆绿", color: Color(red: 188/255, green: 207/255, blue: 144/255), colorRGBName: "#BCCF90"), Model(colorName: "水蜜桃粉", color: Color(red: 246/255, green: 160/255, blue: 154/255), colorRGBName: "#F6A09A") ] 复制代码
就此，数据部分我们就准备好了。
页面样式
我们再来分析下交互逻辑，首先我们要实现左右拖动切换页面，这个我们可以使用到TabView组件作为我们的核心视图，示例：
TabView { //代码块 } .tabViewStyle(PageTabViewStyle()) .edgesIgnoringSafeArea(.all) 复制代码
由于要实现滚动，那么在TabView视图的基础上，还需要使用tabViewStyle修饰符进行修饰，我们使用PageTabViewStyle样式。
另外为了实现整个屏幕都是纯色背景效果，我们使用edgesIgnoringSafeArea修饰符，将iPhone安全区域去掉。
内容结构部分，我们可以使用ForEach循环遍历我们的示例数据数组models的数据，示例：
TabView { ForEach(models) { item in //代码块 } } .tabViewStyle(PageTabViewStyle()) .edgesIgnoringSafeArea(.all) 复制代码
内容显示部分，我们的背景颜色和颜色名称、颜色RGB值的排布方式是文字浮在背景上，因此这里我们可以使用ZStack视图，示例：
TabView { ForEach(models) { item in ZStack { item.color.edgesIgnoringSafeArea(.all) //文字部分 } } } .tabViewStyle(PageTabViewStyle()) .edgesIgnoringSafeArea(.all) 复制代码
上述代码中，我们填充了一个背景颜色，我们看看效果。
最后是文字部分，我们使用VStack纵向布局的方式排布颜色名称和RGB颜色值。示例：
TabView { ForEach(models) { item in ZStack { item.color.edgesIgnoringSafeArea(.all) VStack(alignment: .center, spacing: 20) { Text(item.colorName) .font(.system(size: 24)) .fontWeight(.bold) .foregroundColor(.white) Text(item.colorRGBName) .font(.system(size: 17)) .fontWeight(.bold) .foregroundColor(.white) } } } } .tabViewStyle(PageTabViewStyle()) .edgesIgnoringSafeArea(.all) 复制代码
项目展示
本章代码
import SwiftUI struct ContentView: View { var body: some View { TabView { ForEach(models) { item in ZStack { item.color.edgesIgnoringSafeArea(.all) VStack(alignment: .center, spacing: 20) { Text(item.colorName) .font(.system(size: 28)) .fontWeight(.bold) .foregroundColor(.white) Text(item.colorRGBName) .font(.system(size: 17)) .fontWeight(.bold) .foregroundColor(.white) } } } } .tabViewStyle(PageTabViewStyle()) .edgesIgnoringSafeArea(.all) } } struct ContentView_Previews: PreviewProvider { static var previews: some View { ContentView() } } struct Model: Identifiable { var id = UUID() var colorName: String var color: Color var colorRGBName: String } var models = [ Model(colorName: "草莓红", color: Color(red: 228 / 255, green: 45 / 255, blue: 68 / 255), colorRGBName: "#E42D44"), Model(colorName: "奶油白", color: Color(red: 250 / 255, green: 239 / 255, blue: 222 / 255), colorRGBName: "#FAEFDE"), Model(colorName: "泥猴桃绿", color: Color(red: 123 / 255, green: 173 / 255, blue: 95 / 255), colorRGBName: "#7BAD5F"), Model(colorName: "小麦黄", color: Color(red: 229 / 255, green: 215 / 255, blue: 173 / 255), colorRGBName: "#E5D7AD"), Model(colorName: "板栗灰", color: Color(red: 97 / 255, green: 79 / 255, blue: 77 / 255), colorRGBName: "#614F4D"), Model(colorName: "柠檬黄", color: Color(red: 255 / 255, green: 216 / 255, blue: 0 / 255), colorRGBName: "#FFD800"), Model(colorName: "葡萄紫", color: Color(red: 91 / 255, green: 52 / 255, blue: 99 / 255), colorRGBName: "#5B3663"), Model(colorName: "青豆绿", color: Color(red: 188 / 255, green: 207 / 255, blue: 144 / 255), colorRGBName: "#BCCF90"), Model(colorName: "水蜜桃粉", color: Color(red: 246 / 255, green: 160 / 255, blue: 154 / 255), colorRGBName: "#F6A09A"), ] 复制代码
恭喜你，完成了整个项目的全部内容！
快来动手试试吧。
