🔹 SwiftUI Image 组件的使用方法#
SwiftUI 的 Image 组件用于显示图片，支持本地图片、SF Symbols、远程加载等多种方式。
1️⃣ Image 的基本使用#
✅ 1. 加载 Assets.xcassets 里的图片#
Image("example_image") // 直接从 asset 里加载✅ 2. 加载 SF Symbols（系统图标）#
Image(systemName: "star.fill") // 使用 SF Symbols
.resizable()
.scaledToFit()
.frame(width: 50, height: 50)
.foregroundColor(.yellow)📌 SF Symbols 仅支持 iOS 13+，可以调整大小和颜色。
✅ 3. 从 Bundle 加载图片#
Image("example_image", bundle: .main) // 从主 Bundle 加载📌 适用于：
- 自定义 Bundle 资源（如
Package.swift里的Bundle.module）
✅ 4. 直接从 UIImage 或 NSImage 加载#
Image(uiImage: UIImage(named: "example_image")!) // iOS/macOS📌 适用于：
- 从
UIImagePickerController选择的图片 - 动态加载的
UIImage
✅ 5. 远程加载图片（AsyncImage）#
AsyncImage(url: URL(string: "https://example.com/image.jpg")) { phase in
if let image = phase.image {
image.resizable().scaledToFit() // 成功加载
} else if phase.error != nil {
Text("Failed to load") // 加载失败
} else {
ProgressView() // 正在加载
}
}
.frame(width: 100, height: 100)📌 AsyncImage 适用于 iOS 15+，用于远程图片加载。
2️⃣ Image 的修饰符#
SwiftUI 提供了多种修饰符来调整 Image，以下是常用的修饰符表：
| 修饰符 | 作用 | 示例 |
|---|---|---|
.resizable() | 让图片支持缩放 | Image("example").resizable() |
.scaledToFit() | 等比例缩放至完整显示 | Image("example").resizable().scaledToFit() |
.scaledToFill() | 等比例缩放至填充 | Image("example").resizable().scaledToFill() |
.frame(width:, height:) | 设置固定大小 | .frame(width: 100, height: 100) |
.aspectRatio(contentMode:) | 设置缩放模式 | .aspectRatio(contentMode: .fit) |
.clipShape(shape) | 裁剪形状 | .clipShape(Circle()) |
.cornerRadius(radius) | 圆角 | .cornerRadius(10) |
.overlay(View, alignment:) | 添加叠加视图 | .overlay(Text("Overlay"), alignment: .bottom) |
.shadow(radius:) | 阴影 | .shadow(radius: 10) |
.opacity(value) | 透明度 | .opacity(0.5) |
.foregroundColor(Color) | 设置 SF Symbols 颜色 | Image(systemName: "heart.fill").foregroundColor(.red) |
.blendMode(.mode) | 颜色混合模式 | .blendMode(.multiply) |
.brightness(value) | 亮度调整 | .brightness(0.2) |
.contrast(value) | 对比度调整 | .contrast(1.5) |
.grayscale(value) | 灰度效果 | .grayscale(0.5) |
.hueRotation(Angle) | 颜色旋转 | .hueRotation(.degrees(45)) |
.blur(radius:) | 模糊效果 | .blur(radius: 5) |
.rotationEffect(Angle) | 旋转角度 | .rotationEffect(.degrees(45)) |
.animation(Animation?) | 添加动画 | .animation(.easeInOut) |
3️⃣ 代码示例#
✅ 图片加圆角、阴影、模糊#
Image("example")
.resizable()
.scaledToFit()
.frame(width: 150, height: 150)
.clipShape(RoundedRectangle(cornerRadius: 20))
.shadow(radius: 10)
.blur(radius: 1)✅ 在 ZStack 中添加 overlay 文字#
ZStack {
Image("background")
.resizable()
.scaledToFill()
.frame(width: 300, height: 200)
.clipped()
Text("Hello, World!")
.font(.largeTitle)
.bold()
.foregroundColor(.white)
.shadow(radius: 5)
}✅ SF Symbols 自定义颜色#
Image(systemName: "star.fill")
.resizable()
.scaledToFit()
.frame(width: 50, height: 50)
.foregroundColor(.yellow) // SF Symbols 颜色✅ 结合 gesture 增加交互#
struct ContentView: View {
@State private var scale: CGFloat = 1.0
var body: some View {
Image("example")
.resizable()
.scaledToFit()
.frame(width: 200, height: 200)
.scaleEffect(scale)
.gesture(
MagnificationGesture()
.onChanged { value in
scale = value
}
)
}
}📌 使用 MagnificationGesture 可以让用户用手势放大缩小图片。
🔹 总结#
Image支持本地Assets、SF Symbols、UIImage、AsyncImage远程加载等方式。Image需要.resizable()才能调整大小，否则默认是原始大小。SwiftUI提供了丰富的修饰符，可以控制frame、颜色、滤镜、动画、叠加、手势等效果。- 最佳实践：
- 普通图片：
Image("name").resizable().scaledToFit() - SF Symbols：
Image(systemName: "star.fill").foregroundColor(.yellow) - 圆形头像：
.clipShape(Circle()).overlay(Circle().stroke(Color.white, lineWidth: 2)) - 带阴影+模糊：
.shadow(radius: 10).blur(radius: 2)
- 普通图片：