SwiftUI 中 Image 使用方式详解

SwiftUI 中的 Image 是一个用于显示图像的视图组件。可以从不同的来源加载图像,如 SF Symbols 系统符号、本地资源Bundle、网络图片 URL 或者直接从 UIImageNSImage 对象中加载展示图片。

初始化示例

// 从 SF Symbols 系统符号 加载
Image(systemName: "star")
// 从本地资源 Bundle 加载
Image("imageName")
// 从 UIImage 或 NSImage 加载
Image(uiImage: UIImage(named: "imageName")!)
// 从网络加载图片 URL , RemoteImage 的实现在下方
RemoteImage(url: URL(string: "https://www.codeun.com/image.png")!)

加载网络图片示例

import SwiftUI
import Combine
import Foundation

struct RemoteImage: View {
    @StateObject private var imageLoader = ImageLoader()

    let url: URL

    var body: some View {
        Group {
            if let image = imageLoader.image {
                Image(uiImage: image)
                    .resizable()
            } else {
                ProgressView()
            }
        }
        .onAppear {
            imageLoader.load(url: url)
        }
    }
}

class ImageLoader: ObservableObject {
    @Published var image: UIImage?

    private var cancellable: AnyCancellable?

    func load(url: URL) {
        cancellable = URLSession.shared.dataTaskPublisher(for: url)
            .map { UIImage(data: $0.data) }
            .receive(on: DispatchQueue.main)
            .sink(receiveCompletion: { _ in }, receiveValue: { [weak self] image in
                self?.image = image
            })
    }
}

常用的Image Api

  • 调整图像尺寸: 使用 resizable() 方法使图像可调整大小。您可以通过 frame() 方法设置具体的尺寸。
  • 缩放图像: 使用 scaledToFit()scaledToFill() 方法调整图像的缩放模式。scaledToFit() 会保持图像的原始纵横比并在给定的空间内最大化图像大小。scaledToFill() 会保持纵横比并填充给定的空间。
  • 控制图像的缩放和裁剪方式:aspectRatio 有两种模式:.fit.fill
    • .fit:保持图像的原始宽高比,确保整个图像在给定的空间内可见,即使这意味着在某些边缘留有空白。这是默认模式。
    • .fill:保持图像的原始宽高比,但确保填充整个给定空间,这可能会导致图像的某些部分被裁剪。
  • 裁剪图像: 使用 clipped() 方法裁剪图像。这会删除在视图边界之外的所有图像部分。
  • 设置图像透明度: 使用 opacity() 方法设置图像的透明度,0.0 为完全透明,1.0 为完全不透明。
  • 设置图像的渲染模式: 使用 renderingMode() 方法设置图像的渲染模式。.template 模式将图像视为模板,从而可以使用 foregroundColor() 设置颜色。.original 模式将保留图像的原始颜色。
  • 添加圆角: 使用 cornerRadius() 方法为图像添加圆角。
  • 创建圆形图像: 使用 clipShape 为图像添加圆形裁剪。
  • 添加叠加层: 使用 overlay() 方法在图像上添加叠加层。
  • 添加边框: 使用 border() 方法为图像添加边框。
  • 添加阴影: 使用 shadow() 方法为图像添加阴影。
  • 添加背景: 使用 background() 方法为图像添加背景。
Image("imageName")
    .resizable()
    .scaledToFit() // 或者使用 .scaledToFill()
    .aspectRatio(contentMode: .fit)  // .fit or .fill
    .frame(width: 100, height: 100)
    .cornerRadius(20)
    .clipShape(Circle())
    .clipped()
    .opacity(0.5) // 0.0 为完全透明,1.0 为完全不透明
    .overlay(Text("Codeun")) // 在图像上添加文本叠加层

Image(systemName: "star")
    .renderingMode(.template) // 或者使用 .original
    .border(Color.red, width: 5) // 边框颜色和宽度
    .shadow(color: .black, radius: 10, x: 0, y: 5) // 阴影颜色、半径、偏移量
    .background(Color.blue) // 添加蓝色背景

  本文自 https://www.codeun.com 发布,相应代码均自主编写并严格审阅和测试,完整代码中包含丰富的学习笔记和使用方式、实用技巧。
  · 如若转载,请注明出处:https://www.codeun.com/archives/980.html ·

(0)
上一篇 2023-03-27 上午11:47
下一篇 2023-03-31

相关推荐

  • SwiftUI 之 Image 进阶使用方式与示例

    这篇列举了一些使用 Image 图像组件的进阶使用方法和技巧,了解这些可以帮助更好的调整图像的展示和效果,本文的旨在帮助你需要使用相关用法时,能够提供 Image 使用方法技巧的概…

    教程 2023-03-31
    1.3K

发表回复

登录后才能评论