填充颜色

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

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

1
2
3
4
ZStack {
Color.red
Text("Your content")
}

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

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

内置颜色、语义颜色

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

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

在安全区内放置元素

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

1
2
3
4
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")
}

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

1
2
3
4
5
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:)初始化程序。

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

1
2
3
4
5
Button(action: {
print("Edit button was tapped")
}) {
Image(systemName: "pencil")
}

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

1
2
3
4
5
6
7
8
Button(action: {
print("Edit button was tapped")
}) {
HStack(spacing: 10) {
Image(systemName: "pencil")
Text("Edit")
}
}

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

显示警报信息

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

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

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

1
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,它将显示警报。

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

1
2
3
4
5
6
7
8
9
10
11
12
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")))
}
}
}

这会将警报附加到按钮上,但是说实话,在何处使用alert()修饰符都没关系–我们要做的只是说警报存在,并且在showingAlerttrue 时显示。

仔细看一下alert()修饰符:

1
.alert(isPresented: $showingAlert)

这是另一种双向数据绑定,这是因为在取消showingAlert警报时,SwiftUI会自动设置为false。

参考资料

查看下一天的SwiftUI学习笔记

关于100days英文课程