SwiftUI 基础控件 - Image

689 阅读2分钟

在 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) // 内容模式为适应

可以结合 framealignment 参数对图片对齐方式进行调整。

Image("exampleImage")
    .resizable()
    .frame(width: 200, height: 200, alignment: .center)
    .border(Color.black, width: 2) // 添加边框

适配深色模式

在 SwiftUI 中,支持根据系统的深色模式选择不同的图片:

Image("exampleImage")
    .renderingMode(.template)  // 设置图片为模板模式
    .foregroundColor(.primary) // 在深色/浅色模式自动适应颜色

通过灵活组合这些配置项,Image 可以适用于多种场景,是构建 SwiftUI 界面中非常重要的组件。