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

携手创造，共同生长！这是我参加「日新方案 · 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"),
]

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

快来着手试试吧。

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