SwiftUI：颜色和视图位置

SwiftUI为我们提供了一系列渲染颜色的功能，并且做到了简单和强大——这是一个很难的组合，但他们确实做到了。

要尝试此操作，让我们创建一个带有单个文本标签的ZStack：

ZStack {
    Text("Your content")
}

如果我们想在文本后面放点东西，我们需要把它放在ZStack的上面。但是，如果我们想在后面放点红色呢——我们该怎么做呢？

一个选项是使用background（）修饰符，可以给它一个颜色来绘制如下：

ZStack {
    Text("Your content")
}
.background(Color.red)

这可能达到了您的预期，但很有可能是一个惊喜：只有文本视图有背景色，即使我们要求整个ZStack都有。实际上，这段代码和下面的代码没有区别：

ZStack {
    Text("Your content")
        .background(Color.red)
}

如果要将文本后面的整个区域填充为红色，则应将颜色放入ZStack中——将其视为一个整体视图，仅此而已：

ZStack {
    Color.red
    Text("Your content")
}

实际上，Color.red本身就是一个视图，这就是为什么它可以像形状和文本一样使用。它会自动占用所有可用空间，但您也可以使用frame（）修饰符来要求特定的大小：

Color.red.frame(width: 200, height: 200)

SwiftUI为我们提供了许多内置颜色，例如、、等。我们也有一些语义颜色：颜色不说它们包含什么颜色，而是描述它们的用途。

例如，Color.primary是SwiftUI中文本的默认颜色，根据用户的设备是在亮模式还是在暗模式下运行，它将是黑色还是白色。还有Color.secondary，它也可以是黑色或白色，这取决于设备，但现在它有轻微的透明度，以便后面的一点颜色可以穿透。

如果需要特定的颜色，可以通过为红色、绿色和蓝色传入0到1之间的值来创建自定义颜色，如下所示：

Color(red: 1, green: 0.8, blue: 0)

即使在全屏显示时，您也会看到使用Color.red会留下一些白色的空间。

白色的空间大小取决于您的设备，但根据iPhone X的设计（iphonex、XS和11），您会发现状态栏（顶部的时钟区域）和主指示灯（底部的水平条纹）都没有颜色。

这个空间故意留空，因为苹果不希望重要内容被其他用户界面功能或设备上的任何圆角遮挡。所以，剩下的部分——整个中间空间——被称为安全区域(safe area)，你可以自由地进入它，而不必担心它可能会被iPhone上的凹口夹住。

如果要将内容置于安全区域之下，可以使用edgesIgnoringSafeArea（）修饰符指定要运行到的屏幕边缘。例如，这将创建一个ZStack，该ZStack用红色填充屏幕边到边，然后在顶部绘制一些文本：

ZStack {
    Color.red.edgesIgnoringSafeArea(.all)
    Text("Your content")
}

至关重要的是，不要将重要内容放在安全区域之外，因为用户可能很难甚至不可能看到这些内容。有些视图（如List）允许内容滚动到安全区域之外，但随后会添加额外的插入，以便用户可以将内容滚动到视图中。

如果你的内容只是装饰性的，比如我们这里的背景色，那么把它扩展到安全区域之外就可以了。

译自Colors and frames >

Previous: 使用堆栈排列视图	Hacking with iOS: SwiftUI Edition	Next: 渐变色

赏我一个赞吧~~~