外观风格
自定义图片视图
名称和位置视图都设置好了,下一步就是为地标添加一个图像。
我们将会创建一个自定义视图,为图片添加遮罩、边框和阴影。

首先,要将图像添加到项目的 Assets.xcassets
目录。
第 1 步
在学习前准备下载的资源文件中的 Resources
文件夹中找到turtlerock@2x.jpg
;把它拖到 Assets.xcassets
目录中。Xcode 将为该图像创建一个新的 image set
。

接下来,将为自定义图像视图创建一个新的 SwiftUI 视图。
第 2 步
在导航栏中,选择 File
> New
> File
,再次打开模板选择器。在 User Interface
部分,选择 SwiftUI View
并点击 Next
。将文件命名为 CircleImage.swift
,然后点击 Create
。

现在准备工作已完成。
第 3 步
通过使用 Image(_:)
初始化方法,用 Turtle Rock
图片替换文本。

第 4 步
调用 clipShape(Circle())
方法,将图像剪裁为圆形。
提示
Circle
可以当做一个蒙版的形状,也可以通过 stroke
或 fill
绘制视图。

第 5 步
再创建一个 gray stroke
的 Circle
,然后将其作为 overlay
添加到图片上,作为图片的边框。

第 6 步
接下来,添加一个半径为 7 点的阴影。

第 7 步
将边框颜色改为 white
。
这样就完成了图像视图。
