SwiftUI 学习笔记 20：项目 2-1 制作猜国旗应用

填充颜色

除了使用.background(Color.red)以外的方式，我们还可以用ZStack来设置颜色：

如果要在文本后面的整个区域填充红色，则应将颜色单独放置为ZStack–视为整体视图：

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

实际上，它本身Color.red 就是一种视图，这就是为什么可以像形状和文本一样使用它的原因。它会自动占用所有可用空间，但是你也可以使用frame()修饰符来询问特定的大小：

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

内置颜色、语义颜色

SwiftUI为我们提供了内置的色彩与工作，比如一些Color.blue，Color.green等等。我们也有一些语义颜色：这些颜色不会说出它们所包含的色调，而是描述它们的用途。

例如，Color.primary是SwiftUI中文本的默认颜色，根据用户设备是在亮模式还是暗模式运行，颜色将为黑色或白色。也有Color.secondary，根据设备的不同，颜色也可能是黑色或白色，但现在透明度略有提高，因此其后面的一些颜色会发光。

在安全区内放置元素

如果希望内容进入安全区域，则可以使用edgesIgnoringSafeArea()修饰符指定要运行到的屏幕边缘。例如，这将创建一个ZStack，用红色填充屏幕边缘到边缘，然后在顶部绘制一些文本：

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

这是非常重要的，没有重要内容被放置在安全区域之外，因为它可能很难，如果不是不可能的用户看到。某些视图（例如List）允许内容滚动到安全区域之外，然后添加额外的插图，以便用户可以将内容滚动到视图中。

如果你的内容只是装饰性的（如此处的背景色），则可以将其扩展到安全区域之外。

渐变

SwiftUI为我们提供了三种可以使用的渐变，就像颜色一样，它们也是可以在我们的UI中绘制的视图。

渐变由以下几部分组成：

要显示的颜色数组
尺寸和方向信息
要使用的渐变类型
例如，线性渐变沿一个方向运行，因此我们为其提供了一个起点和终点，如下所示：

1	LinearGradient(gradient: Gradient(colors: [.white, .black]), startPoint: .top, endPoint: .bottom)

在Gradient那里使用的内部类型还可以提供渐变色标，你可以同时指定颜色和应沿着颜色使用多远的颜色。

相比之下，径向渐变以圆形向外移动，因此，我们没有指定方向，而是指定了起点和终点半径-颜色应从圆心到圆心的距离开始和停止变化。例如：

1	RadialGradient(gradient: Gradient(colors: [.blue, .black]), center: .center, startRadius: 20, endRadius: 200)

最后一种渐变类型称为角度渐变，尽管你可能听说过其他地方将其称为圆锥形或圆锥形渐变。这使颜色围绕一个圆圈循环而不是向外辐射，并且可以创建一些美丽的效果。

例如，这将以渐变的中心为中心在单个渐变中循环显示一系列颜色：

1	AngularGradient(gradient: Gradient(colors: [.red, .yellow, .green, .blue, .purple, .red]), center: .center)

所有这些渐变都可以单独用作视图，也可以用作修改器的一部分–例如，你可以将它们用作文本视图的背景。

按钮和图像

SwiftUI中的按钮有两种显示方式，具体取决于外观。

制作按钮的最简单方法是当它仅包含一些文本时：传递按钮的标题，以及点击按钮时应运行的闭包：

1
2
3

Button("Tap me!") {
    print("Button was tapped")
}

如果你还需要其他东西，例如图像或视图组合，则可以使用此替代形式

Button(action: {
    print("Button was tapped")
}) { 
    Text("Tap me!")
}

当你要将图像合并到按钮中时，这尤其常见。

SwiftUI具有Image用于处理应用程序中图片的专用类型，你可以通过三种主要方式创建它们：

Image(“pencil”) 将加载你已添加到项目中的名为“铅笔”的图像。
Image(decorative: “pencil”)会加载同一张图片，但不会为启用了屏幕阅读器的用户读出。这对于不传递其他重要信息的图像很有用。
Image(systemName: “pencil”)将加载iOS内置的铅笔图标。这使用了Apple的SF Symbols图标集，你可以搜索所需的图标–从网络上下载Apple的免费SF Symbols应用程序以查看完整的图标集。
默认情况下，如果启用了屏幕阅读器，它将读取你的图像名称，因此，如果要避免混淆用户，请确保为图像提供清晰的名称。或者，如果他们实际上并未添加屏幕上其他地方尚未存在的信息，请使用Image(decorative:)初始化程序。

由于较长形式的按钮内部可以具有任何视图，因此可以使用如下图像：

Button(action: {
    print("Edit button was tapped")
}) { 
    Image(systemName: "pencil")
}

当然，你可以将它们与堆栈结合使用以制作更高级的按钮布局：

Button(action: {
    print("Edit button was tapped")
}) {
    HStack(spacing: 10) { 
        Image(systemName: "pencil")
        Text("Edit")
    }
}

提示：如果你发现图像已被某种颜色填充，例如显示为纯蓝色而不是实际图片，则可能是SwiftUI为它们着色以显示它们是可轻敲的。要解决此问题，请使用renderingMode(.original)修饰符强制SwiftUI显示原始图像，而不是重新着色的版本。

显示警报信息

如果发生重要事件，通知用户的一种常用方法是使用警报-一个弹出窗口，其中包含标题，消息和一个或两个按钮（取决于你的需要）。

但是请考虑一下：何时应该显示警报以及如何显示警报？视图是我们程序状态的函数，警报也不例外。因此，我们不用说“显示警报”，而是创建警报并设置显示警报的条件。

基本的SwiftUI警报具有标题，消息和一个关闭按钮，如下所示：

1 2	Alert(--- title: Text("Hello SwiftUI!"), message: Text("This is some detail message"), dismissButton: .default(Text("OK")))

如果需要，你可以添加更多代码来更详细地配置按钮，但这已经足够了。更有趣的是我们如何显示警报：我们不将警报分配给变量，而是编写类似之类的内容myAlert.show()，因为这将支持旧的“事件系列”思维方式。

相反，我们创建一些状态来跟踪警报是否显示，如下所示：

1	@State private var showingAlert = false

然后，我们将警报附加到用户界面的某处，告诉它使用该状态来确定是否显示警报。SwiftUI将监视showingAlert，一旦变为true，它将显示警报。

放在一起，下面是一些示例代码，当点击按钮时会显示警报：

struct ContentView: View {
    @State private var showingAlert = false

    var body: some View {
        Button("Show Alert") {
            self.showingAlert = true
        }
        .alert(isPresented: $showingAlert) {
            Alert(---
title: Text("Hello SwiftUI!"), message: Text("This is some detail message"), dismissButton: .default(Text("OK")))
        }
    }
}