Image

🔹 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)

🔹 SwiftUI Image 组件的使用方法 #

1️⃣ Image 的基本使用 #

✅ 1. 加载 Assets.xcassets 里的图片 #