SwiftUI-Image组件学习

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

1. 从资产库中加载图片
  • 如果你的图片已经添加到了Xcode项目的资产中,你可以直接通过图片的名称来加载它:
scss 复制代码
Image("imageName")
    .resizable()  // 如果需要调整图片的大小
    .scaledToFit()  // 让图片自适应容器大小
    .frame(width: 200, height: 200)  // 设置图片的尺寸
  • 需要调整图片的大小,比如加载.9图时的示例
less 复制代码
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:) 来加载:
css 复制代码
Image(systemName: "star.fill")
    .font(.system(size: 50))
    .foregroundColor(.yellow)
  • 系统资源的图标可以在这里下载点我
3. 从 URL 加载图片
  • 从网络加载图片需要结合 AsyncImage 来实现:
scss 复制代码
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() 或其他布局修饰符结合使用。
scss 复制代码
Image("imageName")
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)
2. scaledToFit() / scaledToFill()
  • scaledToFit():确保图片按比例缩放,直到它适合容器的大小,并保持图片的宽高比。
  • scaledToFill():将图片缩放并填满整个容器,可能会改变图片的比例。
scss 复制代码
Image("imageName")
    .resizable()
    .scaledToFit()  // 图片会保持比例,适应容器
    .frame(width: 200, height: 200)

或者:

scss 复制代码
Image("imageName")
    .resizable()
    .scaledToFill()  // 图片会被填满容器,但可能会裁剪
    .frame(width: 200, height: 200)
    .clipped()  // 裁剪超出框架的部分
3. frame(width:height:)
  • 设置图片的固定尺寸。
scss 复制代码
Image("imageName")
    .resizable()
    .frame(width: 200, height: 200)
4. clipShape()
  • 用来将图片裁剪为指定的形状。例如:圆形、椭圆、矩形、路径等。
scss 复制代码
Image("imageName")
    .resizable()
    .clipShape(Circle())  // 将图片裁剪成圆形
    .frame(width: 200, height: 200)
5. cornerRadius()
  • 设置图片的圆角效果。
scss 复制代码
Image("imageName")
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)
    .cornerRadius(20)  // 圆角半径为 20
6. shadow(radius:)
  • 给图片添加阴影效果。
scss 复制代码
Image("imageName")
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)
    .shadow(radius: 10)  // 阴影半径为 10
7. overlay()
  • 在图片上添加叠加的视图(如文本、形状等)。
less 复制代码
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()
  • 控制图片的透明度。
scss 复制代码
Image("imageName")
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)
    .opacity(0.5)  // 设置透明度为 50%
9. rotationEffect()
  • 旋转图片。
scss 复制代码
Image("imageName")
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)
    .rotationEffect(.degrees(45))  // 旋转 45 度
10. blur(radius:)
  • 为图片添加模糊效果。
scss 复制代码
Image("imageName")
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)
    .blur(radius: 10)  // 模糊半径为 10
11. foregroundColor()
  • 改变图片的颜色,通常与 Image(systemName:) 和符号图标一起使用。
less 复制代码
Image(systemName: "star.fill")
    .font(.system(size: 50))
    .foregroundColor(.yellow)  // 设置颜色为黄色
12. alignment
  • 用于在图片框内控制对齐方式。通常配合 frame 使用。
less 复制代码
Image("imageName")
    .resizable()
    .frame(width: 200, height: 200, alignment: .topTrailing)  // 对齐到右上角
13. padding()
  • 给图片添加内边距,图片距离容器的边距
scss 复制代码
Image("imageName")
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)
    .padding(20)  // 添加 20 的内边距
14. border()
  • 给图片添加边框。
scss 复制代码
Image("imageName")
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)
    .border(Color.black, width: 5)  // 设置边框为黑色,宽度为 5
15. rotation3DEffect()
  • 进行 3D 旋转。
less 复制代码
Image("imageName")
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)
    .rotation3DEffect(
        .degrees(45), axis: (x: 1, y: 0, z: 0)
    )
16. transformEffect()
  • 对图片进行变换操作,如缩放、旋转、平移等。
scss 复制代码
Image("imageName")
    .resizable()
    .scaledToFit()
    .frame(width: 200, height: 200)
    .transformEffect(CGAffineTransform(rotationAngle: .pi / 4))  // 旋转图片
17. frame(minWidth:maxWidth:minHeight:maxHeight:alignment:)
  • 控制图片的框架尺寸,包括最小和最大宽高。
less 复制代码
Image("imageName")
    .resizable()
    .scaledToFit()
    .frame(minWidth: 100, maxWidth: 300, minHeight: 100, maxHeight: 300)
5. 结合其他组件使用
  • 你也可以将 Image 与其他布局组件结合使用,比如 VStackHStack
scss 复制代码
VStack {
    Image("imageName")
        .resizable()
        .scaledToFit()
        .frame(width: 200, height: 200)
    Text("This is an image")
        .font(.title)
}
相关推荐
马拉萨的春天37 分钟前
iOS的动态库和静态库的差异区别以及静态库的好处
macos·ios·cocoa
肖老师xy43 分钟前
苹果(IOS)制作开发和发布证书
ios
马拉萨的春天2 小时前
探索Objective-C中的对象复制:深入理解copy和mutableCopy
开发语言·ios·objective-c
00后程序员张2 小时前
Fiddler使用教程,全面掌握Fiddler抓包工具的配置方法、代理设置与调试技巧(HTTPHTTPS全解析)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
2501_916008892 小时前
HTTPS 下的 DDoS 防护与抓包分析实战,从检测到快速缓解的工程化打法
网络协议·ios·小程序·https·uni-app·iphone·ddos
2501_915918412 小时前
App 使用 HTTPS 的工程化实战,从接入到真机排查的一线指南
android·ios·小程序·https·uni-app·iphone·webview
hookserver3 小时前
企业微信ipad协议接口优势
http·ios·微信·企业微信·ipad·企微
Digitally6 小时前
如何从iPhone提取照片:2025年的6种方法
ios·iphone
代码s贝多芬的音符14 小时前
ios android 小程序 蓝牙 CRC16_MODBUS
android·ios·小程序
非专业程序员Ping15 小时前
从0到1自定义文字排版引擎:原理篇
ios·swift·assembly·font