让人惊艳的高级配色，让你的色彩灵感爆棚！

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情。

在本章中，你将学会使用SwiftUI搭建一个纯色背景App。

项目背景

无意中在刷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"),
]

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

快来动手试试吧。

如果本专栏对你有帮助，不妨点赞、评论、关注～