SwiftUI 中的 Image 是一个用于显示图像的视图组件。可以从不同的来源加载图像，如 SF Symbols 系统符号、本地资源Bundle、网络图片 URL 或者直接从 UIImage 或 NSImage 对象中加载展示图片。
初始化示例
// 从 SF Symbols 系统符号 加载
Image(systemName: "star")
// 从本地资源 Bundle 加载
Image("imageName")
// 从 UIImage 或 NSImage 加载
Image(uiImage: UIImage(named: "imageName")!)
// 从网络加载图片 URL , RemoteImage 的实现在下方
RemoteImage(url: URL(string: "https://www.codeun.com/image.png")!)加载网络图片示例
import SwiftUI
import Combine
import Foundation
struct RemoteImage: View {
@StateObject private var imageLoader = ImageLoader()
let url: URL
var body: some View {
Group {
if let image = imageLoader.image {
Image(uiImage: image)
.resizable()
} else {
ProgressView()
}
}
.onAppear {
imageLoader.load(url: url)
}
}
}
class ImageLoader: ObservableObject {
@Published var image: UIImage?
private var cancellable: AnyCancellable?
func load(url: URL) {
cancellable = URLSession.shared.dataTaskPublisher(for: url)
.map { UIImage(data: $0.data) }
.receive(on: DispatchQueue.main)
.sink(receiveCompletion: { _ in }, receiveValue: { [weak self] image in
self?.image = image
})
}
}常用的Image Api
- 调整图像尺寸： 使用
resizable()方法使图像可调整大小。您可以通过frame()方法设置具体的尺寸。 - 缩放图像： 使用
scaledToFit()和scaledToFill()方法调整图像的缩放模式。scaledToFit()会保持图像的原始纵横比并在给定的空间内最大化图像大小。scaledToFill()会保持纵横比并填充给定的空间。 - 控制图像的缩放和裁剪方式：
aspectRatio有两种模式：.fit和.fill.fit：保持图像的原始宽高比，确保整个图像在给定的空间内可见，即使这意味着在某些边缘留有空白。这是默认模式。.fill：保持图像的原始宽高比，但确保填充整个给定空间，这可能会导致图像的某些部分被裁剪。
- 裁剪图像： 使用
clipped()方法裁剪图像。这会删除在视图边界之外的所有图像部分。 - 设置图像透明度： 使用
opacity()方法设置图像的透明度，0.0 为完全透明，1.0 为完全不透明。 - 设置图像的渲染模式： 使用
renderingMode()方法设置图像的渲染模式。.template模式将图像视为模板，从而可以使用foregroundColor()设置颜色。.original模式将保留图像的原始颜色。 - 添加圆角： 使用
cornerRadius()方法为图像添加圆角。 - 创建圆形图像： 使用
clipShape为图像添加圆形裁剪。 - 添加叠加层： 使用
overlay()方法在图像上添加叠加层。 - 添加边框： 使用
border()方法为图像添加边框。 - 添加阴影： 使用
shadow()方法为图像添加阴影。 - 添加背景： 使用
background()方法为图像添加背景。
Image("imageName")
.resizable()
.scaledToFit() // 或者使用 .scaledToFill()
.aspectRatio(contentMode: .fit) // .fit or .fill
.frame(width: 100, height: 100)
.cornerRadius(20)
.clipShape(Circle())
.clipped()
.opacity(0.5) // 0.0 为完全透明，1.0 为完全不透明
.overlay(Text("Codeun")) // 在图像上添加文本叠加层
Image(systemName: "star")
.renderingMode(.template) // 或者使用 .original
.border(Color.red, width: 5) // 边框颜色和宽度
.shadow(color: .black, radius: 10, x: 0, y: 5) // 阴影颜色、半径、偏移量
.background(Color.blue) // 添加蓝色背景