在 SwiftUI 的自定义视图中访问图像的修饰符

Posted 2023-02-23

【中文标题】在 SwiftUI 的自定义视图中访问图像的修饰符

【英文标题】：Accessing modifiers of Image in custom View in SwiftUI

【发布时间】：2019-06-08 14:17:15

【问题描述】：

目前，我在 SwiftUI 中创建了一个自定义视图，其中包含一个带有一些细节的图像。我们如何在我的视图实例之外添加特定的图像修饰符？

import Foundation
import SwiftUI
import Combine

struct RemoteImage: View 

    // Hold reference to our remote resource through binding
    @ObjectBinding
    private var resource: RemoteResource

    // Initialize the Image with a string
    init(urlString: String) 

        // Create our resource and request our data
        // Will fetch the resource from the internet
        self.resource = RemoteResource(urlString)
    

    // Computed var that will return a placeholder image our our actual resource
    private var image: UIImage 
        self.resource.data.flatMap(UIImage.init) ?? UIImage(named: "placeholder")!
    

    var body: some View 
        Image(uiImage: image)
    

如何将 RemoteImage 实例中的修饰符添加到 Image

RemoteImage(urlString: "image-url-here")
    .resizable()
    .scaledToFit()

如果有人知道我的问题的解决方案，请告诉我。

【参考方案1】：

如果你这样声明你的 RemoteImage：

import Foundation
import SwiftUI
import Combine

struct RemoteImage: View 

    // Hold reference to our remote resource through binding
    @ObservedObject
    private var resource: RemoteResource

    // Initialize the Image with a string
    init(urlString: String) 

        // Create our resource and request our data
        // Will fetch the resource from the internet
        self.resource = RemoteResource(urlString)
    

    // Computed var that will return a placeholder image our our actual resource
    private var image: UIImage 
        self.resource.data.flatMap(UIImage.init) ?? UIImage(named: "placeholder")!
    

    var body: Image 
        Image(uiImage: image)
    

然后您可以像这样调用所有特定于图像的修饰符：

RemoteImage(urlString: "image-url-here").body
    .resizable()
    .scaledToFit()

不理想，但至少您不必手动重新声明每个修饰符。

【参考方案2】：

下面的代码增加了两个属性，你就可以调用了

RemoteImage(urlString: myLink).resizable().renderingMode(myRenderingMode)

您可以添加所需的任何数量。

struct RemoteImage: View    
    // Hold reference to our remote resource through binding
    @ObjectBinding
    private var resource: RemoteResource

    // Initialize the Image with a string
    init(urlString: String) 

        // Create our resource and request our data
        // Will fetch the resource from the internet
        self.resource = RemoteResource(urlString)
    

    // Computed var that will return a placeholder image our our actual resource
    private var image: UIImage 
        self.resource.data.flatMap(UIImage.init) ?? UIImage(named: "placeholder")!
    

    // Put whatever new properties you want here *****************
    private var _resizable: (capInsets: EdgeInsets, resizingMode: Image.ResizingMode) = (EdgeInsets(), .stretch)
    private var _renderingMode: Image.TemplateRenderingMode? = nil
    // *****************

    var body: some View 
        Image(uiImage: image)
           .resizable(capInsets: _resizable.capInsets, resizingMode: _resizable.resizingMode)
           .renderingMode(_renderingMode)
    

    // Put whatever new functions you want here *****************
    func resizable(capInsets: EdgeInsets = EdgeInsets(), resizingMode: Image.ResizingMode = .stretch) -> RemoteImageComponent 
        var rm = self
        rm._resizable = (capInsets, resizingMode)
        return rm
    

    func renderingMode(_ renderingMode: Image.TemplateRenderingMode?) -> RemoteImageComponent 
        var rm = self
        rm._renderingMode = renderingMode
        return rm
    

如果您需要知道要为新属性添加哪些参数，则只需单击 CMD 单击系统功能即可查看需要什么。