开发者社区> 文如秋雨> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

让人惊艳的高级配色,让你的色彩灵感爆棚!

简介: 在本章中,你将学会使用SwiftUI搭建一个纯色背景App。
+关注继续查看

image.png

项目背景

无意中在刷B站的时候,看到一些很温馨的颜色搭配,让人充满灵感

以前就很喜欢使用纯色背景,经常会用纯色背景图片作为壁纸。

那么本章中,我们就尝试使用SwiftUI搭建一个纯色背景App

项目搭建

首先,创建一个新的SwiftUI项目,命名为SolidColor

image.png

模型搭建

首先,我们先创建一个数据模型,我们命名为Model

struct Model:Identifiable {
    var id:UUID
    var color:Color
    var colorName:String
    var colorRGBName:String
}
复制代码

image.png

上述代码中,我们创建了一个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")
]
复制代码

image.png

就此,数据部分我们就准备好了。

页面样式

我们再来分析下交互逻辑,首先我们要实现左右拖动切换页面,这个我们可以使用到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)
复制代码

上述代码中,我们填充了一个背景颜色,我们看看效果。

image.png

最后是文字部分,我们使用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)
复制代码

项目展示

image.png

本章代码

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"),
]
复制代码

恭喜你,完成了整个项目的全部内容!

快来动手试试吧。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Swift 周报 第十期
昨日的生活与工作是否也曾迷茫?对新技术渴望突破的心是否依旧执着?Swift社区,为你的技术栈添砖加瓦,你,准备好了吗?
20 0
SAP Hybris和ABAP Netweaver里的DAO(Data access object)
SAP Hybris和ABAP Netweaver里的DAO(Data access object)
30 0
云原生时代,应用架构将如何演进?
如何借助云原生技术来提升交付速度?云原生时代背景下,研发的关注点又会有哪些转变?阿里云高级技术专家许晓斌通过本文分享从 IaaS 上云时代到 PaaS 上云时代的应用架构演进方向,以及云原生技术与应用架构演进的关系。
11720 0
云原生时代,应用架构将如何演进?
IaaS上云和PaaS上云有什么区别?如何借助云原生技术来提升交付的速度?云原生时代背景下,研发的关注点又会有哪些转变?阿里云高级技术专家许晓斌通过本文分享从IaaS上云时代到PaaS上云时代的应用架构演进方向,以及云原生技术与应用架构演进的关系。
3598 0
开源sip server & sip client 和开发库 一览
en source means all source code is available!! Do not post any "free but not open" software here! SIP Proxies Mini-SIP-Proxy A very tiny perl POE...
4994 0
ORACLE启动的时候报ORA-00845的错误
一、事件背景: 新配置的ORACLE 11.2.0.3数据库在启动的时候报错:ORA-00845: MEMORY_TARGET not supported on this system,以下是根据metalink查找的问题原因及处理方法;   二、出现问题的平台: Version 11.
910 0
+关注
文如秋雨
一只默默努力变优秀的产品汪......
102
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载