在 SwiftUI 中,`Image 组件用于显示图像。它可以显示本地图片、系统图标(SF Symbols)、网络图片,并且可以进行多种自定义样式。它的功能相当于 UIKit 中的 UIImage 控件。
下面来看一下 Image 的常用属性和使用方法。
基本使用:显示本地图片 和 SF Symbols 图标
从项目资源中加载图片资源(需在项目的 Assets.xcassets 中添加图像文件)。
Image("exampleImage") // 图片名
.resizable() // 允许图片调整大小
.aspectRatio(contentMode: .fit) // 设置图片适应模式
.frame(width: 100, height: 100) // 设置图片大小
SF Symbols 是苹果提供的系统图标库,图标可以在不同设备上自动调整样式,且支持动态字体和颜色。
Image(systemName: "star.fill") // 使用 SF Symbols 的图标名
.foregroundColor(.yellow) // 设置图标颜色
.font(.system(size: 50)) // 设置图标大小
Image 常用属性
Image 组件可以通过 modifier 方法对图像进行样式调整。
Image("exampleImage")
.resizable()
.frame(width: 150, height: 150)
.clipShape(Circle()) // 将图片裁剪为圆形
.overlay(Circle().stroke(Color.white, lineWidth: 4)) // 添加边框
.shadow(radius: 10) // 添加阴影
Image 可以使用 .resizable() 来调整大小,然后选择 contentMode 来控制图片的显示方式:
• fit:保持原始比例并适应指定的容器。
• fill:拉伸并填满容器,可能会剪裁部分图像。
Image("exampleImage")
.resizable()
.aspectRatio(contentMode: .fit) // 内容模式为适应
可以结合 frame 和 alignment 参数对图片对齐方式进行调整。
Image("exampleImage")
.resizable()
.frame(width: 200, height: 200, alignment: .center)
.border(Color.black, width: 2) // 添加边框
适配深色模式
在 SwiftUI 中,支持根据系统的深色模式选择不同的图片:
Image("exampleImage")
.renderingMode(.template) // 设置图片为模板模式
.foregroundColor(.primary) // 在深色/浅色模式自动适应颜色
通过灵活组合这些配置项,Image 可以适用于多种场景,是构建 SwiftUI 界面中非常重要的组件。