Color in SwiftUI

这一节我们来说说颜色，在这个世界上颜色让我们的生活变的多彩多姿，世界因为有了多种颜色，才变得美不胜收。那么我们该如何在 SwifUI 中去使用颜色呢，接下来我们就一起看看吧。

我们还是用 RounderdRectangle 来做例子，当我们声明一个圆角矩形时，系统会主动使用系统的颜色黑色来填充颜色，不过这个是在Light模式下的颜色，在Dark模式下，它的颜色是白色

struct ColorSample: View {
    var body: some View {
        RoundedRectangle(cornerRadius: 25.0)
            .fill()
            .frame(width: 300, height: 200)
    }
}

让我们来看看具体效果

左图为Dark模式，右图为Light模式

那么该如何去切换模式呢，接着往下看

我们可以点击 预览区域的下面部分切换按钮，当你点击时就会出现一个框。这时我们就可以来切换模式了。注意红色框和箭头的指向

如何使用自定义颜色

通常我们的设计师会给出对应的颜色色值，我们可以在Xcode方便设置颜色，然后在代码中使用对应的名称即可显示颜色

去创建一个颜色

我们找到 Assets.xcassets 点击左下角的 + 号，然后选择 Color set

取一个名称，例如：CustomeColor，最初创建好，默认的Dark和Light颜色都是白色，你可以点击右边拦，进行Color的更改

在代码中去使用

把名称输入 name 的占位符部分，即可查看效果

struct ColorSample: View {
    var body: some View {
        RoundedRectangle(cornerRadius: 25.0)
            .fill(
                Color("CustomColor")
            )
            .frame(width: 300, height: 200)
    }
}

Dark & Light 效果

方法二

你可以定义一个变量，var color = #colorLiteral 当你输入var color = #colorLiteral 时，不会有任何变化，此时不要慌，你只需要按下左括号，也就是 ( ,然后你定义的变量就会变成这样 此时你只需要双击占位图片，就可以弹出一个颜色选择框，这时你可以选择你想要的任何颜色，点击 Other 按钮会有更多颜色提供 有时你想使用 Hex Color，那么你可以点击 Other 按钮，切换到第二栏，就可以在下方输入Hex值了

颜色定义好了之后，你只需要把变量的名称写在 Color 括号里面就可以了。

    struct ColorSample: View {
        var color = #colorLiteral(red: 0, green: 0.8470588235, blue: 0.6431372549, alpha: 1)
        
        var body: some View {
            RoundedRectangle(cornerRadius: 25.0)
                .fill(
                    Color(color)
                )
                .frame(width: 300, height: 200)
        }
    }

你也可以使用 UIColor 来填充颜色，这里和UIColor一样，就不再多说了

    struct ColorSample: View {
        var color = #colorLiteral(red: 0, green: 0.8470588235, blue: 0.6431372549, alpha: 1)
        
        var body: some View {
            RoundedRectangle(cornerRadius: 25.0)
                .fill(
                    Color(UIColor.red)
                )
                .frame(width: 300, height: 200)
        }
    }

这一节主要说了Color的使用，多点点就可以掌握