SwiftUI-Image组件学习

在 SwiftUI 中，Image 组件用于显示图片。你可以通过多种方式加载和展示图片，比如从资产库、系统图标、或者从网络加载图片。

1. 从资产库中加载图片

• 如果你的图片已经添加到了Xcode项目的资产中，你可以直接通过图片的名称来加载它：

Image("imageName")
    .resizable()  // 如果需要调整图片的大小
    .scaledToFit()  // 让图片自适应容器大小
    .frame(width: 200, height: 200)  // 设置图片的尺寸

• 需要调整图片的大小，比如加载.9图时的示例

Image("icon_pro_textview_bg2x.9")
            .resizable(capInsets: EdgeInsets(top: 40, leading: 40, bottom: 40, trailing: 40),
                       resizingMode: .stretch)  // 或者 .tile
            .scaledToFit()
            .frame(width: 335,height: 150)

2. 从系统图标加载图片

• SwiftUI 提供了多种系统图标，你可以使用 Image(systemName:) 来加载：

Image(systemName: "star.fill")
    .font(.system(size: 50))
    .foregroundColor(.yellow)

• 系统资源的图标可以在这里下载点我

3. 从 URL 加载图片

• 从网络加载图片需要结合 AsyncImage 来实现：

AsyncImage(url: URL(string: "https://www.example.com/image.png")) { image in
    image.resizable()
        .scaledToFit()
        .frame(width: 200, height: 200)
} placeholder: {
    ProgressView()  // 加载时显示的占位符
}

4. 修改图片样式

1. resizable()

• 使图片可调整大小，通常与 frame() 或其他布局修饰符结合使用。

Image("imageName")
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)

2. scaledToFit() / scaledToFill()

• scaledToFit()：确保图片按比例缩放，直到它适合容器的大小，并保持图片的宽高比。
• scaledToFill()：将图片缩放并填满整个容器，可能会改变图片的比例。

Image("imageName")
    .resizable()
    .scaledToFit()  // 图片会保持比例，适应容器
    .frame(width: 200, height: 200)

或者：

Image("imageName")
    .resizable()
    .scaledToFill()  // 图片会被填满容器，但可能会裁剪
    .frame(width: 200, height: 200)
    .clipped()  // 裁剪超出框架的部分

3. frame(width:height:)

• 设置图片的固定尺寸。

Image("imageName")
    .resizable()
    .frame(width: 200, height: 200)

4. clipShape()

• 用来将图片裁剪为指定的形状。例如：圆形、椭圆、矩形、路径等。

Image("imageName")
    .resizable()
    .clipShape(Circle())  // 将图片裁剪成圆形
    .frame(width: 200, height: 200)

5. cornerRadius()

• 设置图片的圆角效果。

Image("imageName")
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)
    .cornerRadius(20)  // 圆角半径为 20

6. shadow(radius:)

• 给图片添加阴影效果。

Image("imageName")
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)
    .shadow(radius: 10)  // 阴影半径为 10

7. overlay()

• 在图片上添加叠加的视图（如文本、形状等）。

Image("imageName")
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)
    .overlay(
        Text("Overlay Text")
            .foregroundColor(.white)
            .font(.largeTitle)
            .padding()
            .background(Color.black.opacity(0.5))
            .cornerRadius(10)
    )

8. opacity()

• 控制图片的透明度。

Image("imageName")
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)
    .opacity(0.5)  // 设置透明度为 50%

9. rotationEffect()

• 旋转图片。

Image("imageName")
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)
    .rotationEffect(.degrees(45))  // 旋转 45 度

10. blur(radius:)

• 为图片添加模糊效果。

Image("imageName")
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)
    .blur(radius: 10)  // 模糊半径为 10

11. foregroundColor()

• 改变图片的颜色，通常与 Image(systemName:) 和符号图标一起使用。

Image(systemName: "star.fill")
    .font(.system(size: 50))
    .foregroundColor(.yellow)  // 设置颜色为黄色

12. alignment

• 用于在图片框内控制对齐方式。通常配合 frame 使用。

Image("imageName")
    .resizable()
    .frame(width: 200, height: 200, alignment: .topTrailing)  // 对齐到右上角

13. padding()

• 给图片添加内边距,图片距离容器的边距

Image("imageName")
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)
    .padding(20)  // 添加 20 的内边距

14. border()

• 给图片添加边框。

Image("imageName")
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)
    .border(Color.black, width: 5)  // 设置边框为黑色，宽度为 5

15. rotation3DEffect()

• 进行 3D 旋转。

Image("imageName")
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)
    .rotation3DEffect(
        .degrees(45), axis: (x: 1, y: 0, z: 0)
    )

16. transformEffect()

• 对图片进行变换操作，如缩放、旋转、平移等。

Image("imageName")
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)
    .transformEffect(CGAffineTransform(rotationAngle: .pi / 4))  // 旋转图片

17. frame(minWidth:maxWidth:minHeight:maxHeight:alignment:)

• 控制图片的框架尺寸，包括最小和最大宽高。

Image("imageName")
    .resizable()
    .scaledToFit()
    .frame(minWidth: 100, maxWidth: 300, minHeight: 100, maxHeight: 300)

5. 结合其他组件使用

• 你也可以将 Image 与其他布局组件结合使用，比如 VStack 或 HStack：

VStack {
    Image("imageName")
        .resizable()
        .scaledToFit()
        .frame(width: 200, height: 200)
    Text("This is an image")
        .font(.title)
}