swiftUI 官方教程（三）

swiftUI 官方教程（四）

4. 自定义 Image View

搞定名称和位置 view 后，我们来给地标添加图片。

这不需要添加很多代码，只需要创建一个自定义 view，然后给图片加上遮罩、边框和阴影即可。

asset catalog

Resourcesturtlerock.pngasset catalogimage set

SwiftUI

FileNewFileUser InterfaceSwiftUI ViewNextCircleImage.swiftCreate

现在准备工作已完成。

swiftUI 官方教程

Image(_:)Turtle Rock

CircleImage.swift

import SwiftUI  struct CircleImage: View {     var body: some View {         Image("turtlerock")     } }  struct CircleImage_Preview: PreviewProvider {     static var previews: some View {         CircleImage()     } } 

.clipShape(Circle())

Circlestrokefill

CircleImage.swift

import SwiftUI  struct CircleImage: View {     var body: some View {         Image("turtlerock")             .clipShape(Circle())     } }  struct CircleImage_Preview: PreviewProvider {     static var previews: some View {         CircleImage()     } } 

gray strokecircleoverlay

CircleImage.swift

import SwiftUI  struct CircleImage: View {     var body: some View {         Image("turtlerock")             .clipShape(Circle())             .overlay(                 Circle().stroke(Color.gray, lineWidth: 4))     } }  struct CircleImage_Preview: PreviewProvider {     static var previews: some View {         CircleImage()     } } 

4.6 接来下，添加一个半径为 10 point 的阴影。

CircleImage.swift

import SwiftUI  struct CircleImage: View {     var body: some View {         Image("turtlerock")             .clipShape(Circle())             .overlay(                 Circle().stroke(Color.gray, lineWidth: 4))             .shadow(radius: 10)     } }  struct CircleImage_Preview: PreviewProvider {     static var previews: some View {         CircleImage()     } } 

swiftUI 教程

white

CircleImage.swift

import SwiftUI  struct CircleImage: View {     var body: some View {         Image("turtlerock")             .clipShape(Circle())             .overlay(                 Circle().stroke(Color.white, lineWidth: 4))             .shadow(radius: 10)     } }  struct CircleImage_Preview: PreviewProvider {     static var previews: some View {         CircleImage()     } }