iOS SwiftUI中GIF图片设置frame尺寸无效的问题排查求助

我在iOS SwiftUI中实现了基于UIViewRepresentable的GifImage组件，用于加载远程GIF图片。通过获取GIF原始尺寸计算并设置目标高度后，控制台输出的gifHeight数值正确，但设置的frame尺寸未生效，请问该如何修复？

原实现代码 #

import SwiftUI
import PhotosUI
import AVKit
import Swime
import WebKit

struct GifImage: UIViewRepresentable {
    enum URLType {
        case local(String)
        case remote(URL?)

        var url: URL? {
            switch self {
                case .local(let name):
                return Bundle.main.url(forResource: name, withExtension: "gif")
                
                case .remote(let url):
                return url
            }
        }
    }

    let type: URLType
    var loaded: ((UIImageView, UIImage?) -> Void)?

    func makeUIView(context: Context) -> UIView {
        
        let view = UIImageView()
        DispatchQueue.global(qos: .background).async {
            
            if let url = type.url, let data = try? Data(contentsOf: url) {
                DispatchQueue.main.async {
                    if let image = UIImage.gif(data: data) {
                        view.image = image
                        view.contentMode = .scaleAspectFit
                        self.loaded?(view, image)
                    }
                }
            } else {
                DispatchQueue.main.async {
                    self.loaded?(view, nil)
                }
            }
        }
        return view
    }

    func updateUIView(_ uiView: UIView, context: Context) {}
}


struct VidPlay: View {
    
    @State var gifSize: CGSize?
    @State var gifHeight: CGFloat = 80

    var body: some View {
        
        VStack(spacing: 20){
            
            
            ZStack{

                GifImage(type: .remote(URL(string: "https://media.tenor.com/hRiPtsp-m0IAAAAM/the-simpsons-homer-simpson.gif"))) { _, image in
                  gifSize = image?.size
                }
                .frame(width: 80, height: gifHeight)

            }
            .onChange(of: gifSize) { _ in
                
                if(gifSize != nil){
                    
                    gifHeight = 80 * (gifSize!.height / gifSize!.width)
                    print(gifHeight)
                }
            }
            .frame(width: 240, height: 240)
            .background(Color.blue)

        }
    }
}

修复方案 #

问题核心：原GifImage的updateUIView方法为空，当gifHeight更新时，SwiftUI触发视图刷新，但底层的UIImageView尺寸没有同步更新；同时外层的.frame仅作用于UIViewRepresentable的容器视图，并未传递给内部的GIF展示视图。

步骤1：修改GifImage组件 #

让组件接收尺寸参数，并在updateUIView中同步更新底层视图的尺寸：

struct GifImage: UIViewRepresentable {
    enum URLType {
        case local(String)
        case remote(URL?)

        var url: URL? {
            switch self {
                case .local(let name):
                return Bundle.main.url(forResource: name, withExtension: "gif")
                
                case .remote(let url):
                return url
            }
        }
    }

    let type: URLType
    let width: CGFloat
    let height: CGFloat
    var loaded: ((UIImageView, UIImage?) -> Void)?

    // 直接返回UIImageView，避免类型转换
    func makeUIView(context: Context) -> UIImageView {
        let view = UIImageView()
        view.contentMode = .scaleAspectFit
        loadGifIntoView(view)
        return view
    }

    // 当外部尺寸变化时，更新底层视图的frame
    func updateUIView(_ uiView: UIImageView, context: Context) {
        uiView.frame = CGRect(x: 0, y: 0, width: width, height: height)
    }

    // 抽离GIF加载逻辑，优化代码结构
    private func loadGifIntoView(_ view: UIImageView) {
        guard let url = type.url else {
            DispatchQueue.main.async {
                self.loaded?(view, nil)
            }
            return
        }
        // 替换同步Data(contentsOf:)为URLSession异步加载，避免阻塞线程
        URLSession.shared.dataTask(with: url) { data, _, error in
            guard let data = data, error == nil else {
                DispatchQueue.main.async {
                    self.loaded?(view, nil)
                }
                return
            }
            DispatchQueue.main.async {
                if let image = UIImage.gif(data: data) {
                    view.image = image
                    self.loaded?(view, image)
                } else {
                    self.loaded?(view, nil)
                }
            }
        }.resume()
    }
}

步骤2：修改VidPlay视图调用 #

将动态计算的gifHeight传递给GifImage，确保尺寸变化能同步到底层视图：

struct VidPlay: View {
    @State var gifSize: CGSize?
    @State var gifHeight: CGFloat = 80
    private let fixedWidth: CGFloat = 80

    var body: some View {
        VStack(spacing: 20){
            ZStack{
                GifImage(
                    type: .remote(URL(string: "https://media.tenor.com/hRiPtsp-m0IAAAAM/the-simpsons-homer-simpson.gif")),
                    width: fixedWidth,
                    height: gifHeight
                ) { _, image in
                    gifSize = image?.size
                }
            }
            .onChange(of: gifSize) { newSize in
                guard let size = newSize else { return }
                gifHeight = fixedWidth * (size.height / size.width)
                print(gifHeight)
            }
            .frame(width: 240, height: 240)
            .background(Color.blue)
        }
    }
}

修复说明 #

1. 同步底层视图尺寸：通过updateUIView方法，在外部尺寸参数变化时直接更新UIImageView的frame，确保视图能响应尺寸变化。
2. 优化网络加载：用URLSession异步加载替代同步Data(contentsOf:)，避免阻塞后台线程，符合iOS网络最佳实践。
3. 简化视图层级：让makeUIView直接返回UIImageView，减少不必要的容器视图，提升代码可读性。

内容的提问来源于stack exchange，提问作者TheGreatCornholio